teratail
回答率
85.34%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSS3に関する質問ｃｓｓのみでアクセス時にモーダルを表示させたい（inputタグ使用不可）

編集履歴

回答編集履歴

3

コード修正 サンプル追加

2021/02/22 03:01

投稿

hatena19
hatena19

スコア34141

test CHANGED
@@ -4,162 +4,168 @@
4
4
 
5
5
  ```html
6
6
 
7
- <a href="#modal-01" id="img1">
7
+ <a href="#" id="img1">
8
8
 
9
- <img src="https://picsum.photos/id/1080/140">
9
+ <img src="https://picsum.photos/id/1080/140">
10
10
 
11
- </a>
11
+ </a>
12
12
 
13
- <div class="modal-wrapper" id="modal-01">
13
+ <div class="modal-wrapper">
14
14
 
15
- <a href="#img1" class="modal-overlay"></a>
15
+ <a href="#img1" class="modal-overlay"></a>
16
16
 
17
- <div class="modal-window">
17
+ <div class="modal-window">
18
18
 
19
- <div class="modal-content">
19
+ <div class="modal-content">
20
20
 
21
- <img src="https://picsum.photos/id/1080/600" width="100%">
21
+ <img src="https://picsum.photos/id/1080/600" width="100%">
22
-
23
- </div>
24
-
25
- <a href="#img1" class="modal-close">×</a>
26
22
 
27
23
  </div>
28
24
 
25
+ <a href="#img1" class="modal-close">×</a>
26
+
29
27
  </div>
28
+
29
+ </div>
30
30
 
31
31
  ```
32
32
 
33
33
  ```css
34
34
 
35
- .modal-wrapper {
35
+ .modal-wrapper {
36
36
 
37
- z-index: 999;
37
+ z-index: 999;
38
38
 
39
- position: fixed;
39
+ position: fixed;
40
40
 
41
- top: 0;
41
+ top: 0;
42
42
 
43
- right: 0;
43
+ right: 0;
44
44
 
45
- bottom: 0;
45
+ bottom: 0;
46
46
 
47
- left: 0;
47
+ left: 0;
48
48
 
49
- padding: 60px 10px;
49
+ padding: 60px 10px;
50
50
 
51
- text-align: center;
51
+ text-align: center;
52
52
 
53
- opacity: 1;
53
+ }
54
54
 
55
- visibility: visible;
55
+ #img1:not(:target) + .modal-wrapper {
56
56
 
57
- transition: opacity .4s, visibility .4s;
57
+ opacity: 1;
58
58
 
59
- }
59
+ visibility: visible;
60
60
 
61
- #img1:target + .modal-wrapper {
61
+ transition: opacity .4s, visibility .4s;
62
62
 
63
- opacity: 0;
63
+ }
64
64
 
65
- visibility: hidden;
65
+ #img1:target + .modal-wrapper {
66
66
 
67
- transition: opacity .3s, visibility .3s;
67
+ opacity: 0;
68
68
 
69
- }
69
+ visibility: hidden;
70
70
 
71
- .modal-wrapper::after {
71
+ transition: opacity .3s, visibility .3s;
72
72
 
73
- display: inline-block;
73
+ }
74
74
 
75
- height: 100%;
75
+ .modal-wrapper::after {
76
76
 
77
- margin-left: -.05em;
77
+ display: inline-block;
78
78
 
79
- vertical-align: middle;
79
+ height: 100%;
80
80
 
81
- content: ""
81
+ margin-left: -.05em;
82
82
 
83
- }
83
+ vertical-align: middle;
84
84
 
85
- .modal-wrapper .modal-window {
85
+ content: ""
86
86
 
87
- box-sizing: border-box;
87
+ }
88
88
 
89
- display: inline-block;
89
+ .modal-wrapper .modal-window {
90
90
 
91
- z-index: 20;
91
+ box-sizing: border-box;
92
92
 
93
- position: relative;
93
+ display: inline-block;
94
94
 
95
- width: 70%;
95
+ z-index: 20;
96
96
 
97
- max-width: 600px;
97
+ position: relative;
98
98
 
99
- padding: 30px 30px 15px;
99
+ width: 70%;
100
100
 
101
- border-radius: 2px;
101
+ max-width: 600px;
102
102
 
103
- background: #fff;
103
+ padding: 30px 30px 15px;
104
104
 
105
- box-shadow: 0 0 30px rgba(0, 0, 0, .6);
105
+ border-radius: 2px;
106
106
 
107
- vertical-align: middle
107
+ background: #fff;
108
108
 
109
- }
109
+ box-shadow: 0 0 30px rgba(0, 0, 0, .6);
110
110
 
111
- .modal-wrapper .modal-window .modal-content {
111
+ vertical-align: middle
112
112
 
113
- max-height: 80vh;
113
+ }
114
114
 
115
- overflow-y: auto;
115
+ .modal-wrapper .modal-window .modal-content {
116
116
 
117
- }
117
+ max-height: 80vh;
118
118
 
119
- .modal-overlay {
119
+ overflow-y: auto;
120
120
 
121
- z-index: 10;
121
+ }
122
122
 
123
- position: absolute;
123
+ .modal-overlay {
124
124
 
125
- top: 0;
125
+ z-index: 10;
126
126
 
127
- right: 0;
127
+ position: absolute;
128
128
 
129
- bottom: 0;
129
+ top: 0;
130
130
 
131
- left: 0;
131
+ right: 0;
132
132
 
133
- background: rgba(0, 0, 0, .8)
133
+ bottom: 0;
134
134
 
135
- }
135
+ left: 0;
136
136
 
137
- .modal-wrapper .modal-close {
137
+ background: rgba(0, 0, 0, .8)
138
138
 
139
- z-index: 20;
139
+ }
140
140
 
141
- position: absolute;
141
+ .modal-wrapper .modal-close {
142
142
 
143
- top: 0;
143
+ z-index: 20;
144
144
 
145
- right: 0;
145
+ position: absolute;
146
146
 
147
- width: 35px;
147
+ top: 0;
148
148
 
149
- color: #95979c !important;
149
+ right: 0;
150
150
 
151
- font-size: 20px;
151
+ width: 35px;
152
152
 
153
- font-weight: 700;
153
+ color: #95979c !important;
154
154
 
155
- line-height: 35px;
155
+ font-size: 20px;
156
156
 
157
- text-align: center;
157
+ font-weight: 700;
158
158
 
159
- text-decoration: none;
159
+ line-height: 35px;
160
160
 
161
- text-indent: 0
161
+ text-align: center;
162
162
 
163
+ text-decoration: none;
164
+
165
+ text-indent: 0
166
+
163
- }
167
+ }
164
168
 
165
169
  ```
170
+
171
+ [CodePenサンプル](https://codepen.io/hatena19/pen/qBqPRdp)

2

コード修正

2021/02/22 03:01

投稿

hatena19
hatena19

スコア34141

test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  padding: 60px 10px;
50
50
 
51
- text-align: center
51
+ text-align: center;
52
52
 
53
53
  opacity: 1;
54
54
 

1

コード追記

2021/02/22 02:50

投稿

hatena19
hatena19

スコア34141

test CHANGED
@@ -1,3 +1,165 @@
1
- そのページのURLの最後に `#modal-01` を付加してアクセスすればモーダルウィンドウが表示された状態で開きます。
1
+ 下記でどうでしょうか。
2
2
 
3
+
4
+
5
+ ```html
6
+
7
+ <a href="#modal-01" id="img1">
8
+
9
+ <img src="https://picsum.photos/id/1080/140">
10
+
11
+ </a>
12
+
13
+ <div class="modal-wrapper" id="modal-01">
14
+
15
+ <a href="#img1" class="modal-overlay"></a>
16
+
17
+ <div class="modal-window">
18
+
19
+ <div class="modal-content">
20
+
21
+ <img src="https://picsum.photos/id/1080/600" width="100%">
22
+
23
+ </div>
24
+
25
+ <a href="#img1" class="modal-close">×</a>
26
+
27
+ </div>
28
+
29
+ </div>
30
+
31
+ ```
32
+
33
+ ```css
34
+
35
+ .modal-wrapper {
36
+
37
+ z-index: 999;
38
+
39
+ position: fixed;
40
+
41
+ top: 0;
42
+
43
+ right: 0;
44
+
45
+ bottom: 0;
46
+
47
+ left: 0;
48
+
49
+ padding: 60px 10px;
50
+
51
+ text-align: center
52
+
53
+ opacity: 1;
54
+
55
+ visibility: visible;
56
+
57
+ transition: opacity .4s, visibility .4s;
58
+
59
+ }
60
+
61
+ #img1:target + .modal-wrapper {
62
+
63
+ opacity: 0;
64
+
65
+ visibility: hidden;
66
+
67
+ transition: opacity .3s, visibility .3s;
68
+
69
+ }
70
+
71
+ .modal-wrapper::after {
72
+
73
+ display: inline-block;
74
+
75
+ height: 100%;
76
+
3
- :target属性とはそういうものなので。
77
+ margin-left: -.05em;
78
+
79
+ vertical-align: middle;
80
+
81
+ content: ""
82
+
83
+ }
84
+
85
+ .modal-wrapper .modal-window {
86
+
87
+ box-sizing: border-box;
88
+
89
+ display: inline-block;
90
+
91
+ z-index: 20;
92
+
93
+ position: relative;
94
+
95
+ width: 70%;
96
+
97
+ max-width: 600px;
98
+
99
+ padding: 30px 30px 15px;
100
+
101
+ border-radius: 2px;
102
+
103
+ background: #fff;
104
+
105
+ box-shadow: 0 0 30px rgba(0, 0, 0, .6);
106
+
107
+ vertical-align: middle
108
+
109
+ }
110
+
111
+ .modal-wrapper .modal-window .modal-content {
112
+
113
+ max-height: 80vh;
114
+
115
+ overflow-y: auto;
116
+
117
+ }
118
+
119
+ .modal-overlay {
120
+
121
+ z-index: 10;
122
+
123
+ position: absolute;
124
+
125
+ top: 0;
126
+
127
+ right: 0;
128
+
129
+ bottom: 0;
130
+
131
+ left: 0;
132
+
133
+ background: rgba(0, 0, 0, .8)
134
+
135
+ }
136
+
137
+ .modal-wrapper .modal-close {
138
+
139
+ z-index: 20;
140
+
141
+ position: absolute;
142
+
143
+ top: 0;
144
+
145
+ right: 0;
146
+
147
+ width: 35px;
148
+
149
+ color: #95979c !important;
150
+
151
+ font-size: 20px;
152
+
153
+ font-weight: 700;
154
+
155
+ line-height: 35px;
156
+
157
+ text-align: center;
158
+
159
+ text-decoration: none;
160
+
161
+ text-indent: 0
162
+
163
+ }
164
+
165
+ ```