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

編集履歴

回答編集履歴

3

コード修正 サンプル追加

2021/02/22 03:01

投稿

hatena19
hatena19

score94

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
 

2

コード修正

2021/02/22 02:50

投稿

hatena19
hatena19

score94

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
+ ```

1

コード追記

2021/02/22 02:47

投稿

hatena19
hatena19

score94

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