teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

コード修正 サンプル追加

2021/02/22 03:01

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,83 +1,86 @@
1
1
  下記でどうでしょうか。
2
2
 
3
3
  ```html
4
- <a href="#modal-01" id="img1">
4
+ <a href="#" id="img1">
5
- <img src="https://picsum.photos/id/1080/140">
5
+ <img src="https://picsum.photos/id/1080/140">
6
- </a>
6
+ </a>
7
- <div class="modal-wrapper" id="modal-01">
7
+ <div class="modal-wrapper">
8
- <a href="#img1" class="modal-overlay"></a>
8
+ <a href="#img1" class="modal-overlay"></a>
9
- <div class="modal-window">
9
+ <div class="modal-window">
10
- <div class="modal-content">
10
+ <div class="modal-content">
11
- <img src="https://picsum.photos/id/1080/600" width="100%">
11
+ <img src="https://picsum.photos/id/1080/600" width="100%">
12
- </div>
13
- <a href="#img1" class="modal-close">×</a>
14
12
  </div>
13
+ <a href="#img1" class="modal-close">×</a>
15
14
  </div>
15
+ </div>
16
16
  ```
17
17
  ```css
18
- .modal-wrapper {
19
- z-index: 999;
20
- position: fixed;
21
- top: 0;
22
- right: 0;
23
- bottom: 0;
24
- left: 0;
25
- padding: 60px 10px;
26
- text-align: center;
27
- opacity: 1;
28
- visibility: visible;
29
- transition: opacity .4s, visibility .4s;
30
- }
31
- #img1:target + .modal-wrapper {
32
- opacity: 0;
33
- visibility: hidden;
34
- transition: opacity .3s, visibility .3s;
35
- }
36
- .modal-wrapper::after {
37
- display: inline-block;
38
- height: 100%;
39
- margin-left: -.05em;
40
- vertical-align: middle;
41
- content: ""
42
- }
43
- .modal-wrapper .modal-window {
44
- box-sizing: border-box;
45
- display: inline-block;
46
- z-index: 20;
47
- position: relative;
48
- width: 70%;
49
- max-width: 600px;
50
- padding: 30px 30px 15px;
51
- border-radius: 2px;
52
- background: #fff;
53
- box-shadow: 0 0 30px rgba(0, 0, 0, .6);
54
- vertical-align: middle
55
- }
56
- .modal-wrapper .modal-window .modal-content {
57
- max-height: 80vh;
58
- overflow-y: auto;
59
- }
60
- .modal-overlay {
61
- z-index: 10;
62
- position: absolute;
63
- top: 0;
64
- right: 0;
65
- bottom: 0;
66
- left: 0;
67
- background: rgba(0, 0, 0, .8)
68
- }
69
- .modal-wrapper .modal-close {
70
- z-index: 20;
71
- position: absolute;
72
- top: 0;
73
- right: 0;
74
- width: 35px;
75
- color: #95979c !important;
76
- font-size: 20px;
77
- font-weight: 700;
78
- line-height: 35px;
79
- text-align: center;
80
- text-decoration: none;
81
- text-indent: 0
82
- }
83
- ```
18
+ .modal-wrapper {
19
+ z-index: 999;
20
+ position: fixed;
21
+ top: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ left: 0;
25
+ padding: 60px 10px;
26
+ text-align: center;
27
+ }
28
+ #img1:not(:target) + .modal-wrapper {
29
+ opacity: 1;
30
+ visibility: visible;
31
+ transition: opacity .4s, visibility .4s;
32
+ }
33
+ #img1:target + .modal-wrapper {
34
+ opacity: 0;
35
+ visibility: hidden;
36
+ transition: opacity .3s, visibility .3s;
37
+ }
38
+ .modal-wrapper::after {
39
+ display: inline-block;
40
+ height: 100%;
41
+ margin-left: -.05em;
42
+ vertical-align: middle;
43
+ content: ""
44
+ }
45
+ .modal-wrapper .modal-window {
46
+ box-sizing: border-box;
47
+ display: inline-block;
48
+ z-index: 20;
49
+ position: relative;
50
+ width: 70%;
51
+ max-width: 600px;
52
+ padding: 30px 30px 15px;
53
+ border-radius: 2px;
54
+ background: #fff;
55
+ box-shadow: 0 0 30px rgba(0, 0, 0, .6);
56
+ vertical-align: middle
57
+ }
58
+ .modal-wrapper .modal-window .modal-content {
59
+ max-height: 80vh;
60
+ overflow-y: auto;
61
+ }
62
+ .modal-overlay {
63
+ z-index: 10;
64
+ position: absolute;
65
+ top: 0;
66
+ right: 0;
67
+ bottom: 0;
68
+ left: 0;
69
+ background: rgba(0, 0, 0, .8)
70
+ }
71
+ .modal-wrapper .modal-close {
72
+ z-index: 20;
73
+ position: absolute;
74
+ top: 0;
75
+ right: 0;
76
+ width: 35px;
77
+ color: #95979c !important;
78
+ font-size: 20px;
79
+ font-weight: 700;
80
+ line-height: 35px;
81
+ text-align: center;
82
+ text-decoration: none;
83
+ text-indent: 0
84
+ }
85
+ ```
86
+ [CodePenサンプル](https://codepen.io/hatena19/pen/qBqPRdp)

2

コード修正

2021/02/22 03:01

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -23,7 +23,7 @@
23
23
  bottom: 0;
24
24
  left: 0;
25
25
  padding: 60px 10px;
26
- text-align: center
26
+ text-align: center;
27
27
  opacity: 1;
28
28
  visibility: visible;
29
29
  transition: opacity .4s, visibility .4s;

1

コード追記

2021/02/22 02:50

投稿

hatena19
hatena19

スコア34367

answer CHANGED
@@ -1,2 +1,83 @@
1
+ 下記でどうでしょうか。
2
+
3
+ ```html
1
- そのページのURLの最後に `#modal-01` を付加してアクセスすればモーダルウィンドウが表示された状態で開きます。
4
+ <a href="#modal-01" id="img1">
5
+ <img src="https://picsum.photos/id/1080/140">
6
+ </a>
7
+ <div class="modal-wrapper" id="modal-01">
8
+ <a href="#img1" class="modal-overlay"></a>
9
+ <div class="modal-window">
10
+ <div class="modal-content">
11
+ <img src="https://picsum.photos/id/1080/600" width="100%">
12
+ </div>
13
+ <a href="#img1" class="modal-close">×</a>
14
+ </div>
15
+ </div>
16
+ ```
17
+ ```css
18
+ .modal-wrapper {
19
+ z-index: 999;
20
+ position: fixed;
21
+ top: 0;
22
+ right: 0;
23
+ bottom: 0;
24
+ left: 0;
25
+ padding: 60px 10px;
26
+ text-align: center
27
+ opacity: 1;
28
+ visibility: visible;
29
+ transition: opacity .4s, visibility .4s;
30
+ }
31
+ #img1:target + .modal-wrapper {
32
+ opacity: 0;
33
+ visibility: hidden;
34
+ transition: opacity .3s, visibility .3s;
35
+ }
36
+ .modal-wrapper::after {
37
+ display: inline-block;
38
+ height: 100%;
2
- :target属性とはそういうものなので。
39
+ margin-left: -.05em;
40
+ vertical-align: middle;
41
+ content: ""
42
+ }
43
+ .modal-wrapper .modal-window {
44
+ box-sizing: border-box;
45
+ display: inline-block;
46
+ z-index: 20;
47
+ position: relative;
48
+ width: 70%;
49
+ max-width: 600px;
50
+ padding: 30px 30px 15px;
51
+ border-radius: 2px;
52
+ background: #fff;
53
+ box-shadow: 0 0 30px rgba(0, 0, 0, .6);
54
+ vertical-align: middle
55
+ }
56
+ .modal-wrapper .modal-window .modal-content {
57
+ max-height: 80vh;
58
+ overflow-y: auto;
59
+ }
60
+ .modal-overlay {
61
+ z-index: 10;
62
+ position: absolute;
63
+ top: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ left: 0;
67
+ background: rgba(0, 0, 0, .8)
68
+ }
69
+ .modal-wrapper .modal-close {
70
+ z-index: 20;
71
+ position: absolute;
72
+ top: 0;
73
+ right: 0;
74
+ width: 35px;
75
+ color: #95979c !important;
76
+ font-size: 20px;
77
+ font-weight: 700;
78
+ line-height: 35px;
79
+ text-align: center;
80
+ text-decoration: none;
81
+ text-indent: 0
82
+ }
83
+ ```