cssだけで、画像拡大モーダル表示

ネットショップ語りさんの   CSSのみでモーダルウィンドウを作成からのコピペです。

1. <a href="#modal-01">

この数字を変えれば、同じページでも複数表示が可能です。

ちょこちょこ数字を変えて、画像に拡大アイコンを重ねて、開いたときの余白を消して、閉じるアイコンをつけました。 スマホ用のサイズです。

 

でも、謎の線がでてしまいました...。

無理に消すと、モーダルウィンドウが消えて、画像が重なっただけになってしまいます…。

まぁ、いっか。

拡大アイコンを重ねたのは、こちらを参考にしました。

public-constructor.com

今度、重ねたいと思ったときは、こちらも勉強したいと思います。

techacademy.jp

今回の備忘録

◎HTML

1. <div class="box">
2. <div class="gazou"><img src="画像url"></div>
3. <div class="icon"><a href="#modal-name"><img style="vertical-align: top;" src="拡大アイコンurl"></a></div>
4. <div id="modal-name" class="modal-wrapper"><a href="#!" class="modal-overlay">?</a>
5. <div class="modal-window">
6. <div class="modal-content">
7. <img src="画像url" width="100%">
8. </div>
9. <a href="#!" class="modal-close"><img src="閉じるアイコンurl"></a></div>
10. </div></div>

◎css

1. .box {
2. max-width: 40%;
3. height: auto;
4. margin: 0 auto;
5. padding: 0;
6. position:relative;
7. }
8. .gazou img {
9. max-width: 100%;
10. height: auto;
11. }
12. .icon img {
13.     position: absolute;
14.     top: 0;
15.     right: 0;
16.   }
18.  /*-----ここから、ネットショップ語りさんからのコピペ。数カ所、変更してます。-----*/
20. .modal-wrapper {
21.   z-index: 999;
22.   position: fixed;
23.   top: 0;
24.   right: 0;
25.   bottom: 0;
26.   left: 0;
27.   padding: 20px 10px;
28.   text-align: center
29. }
30. .modal-wrapper:not(:target) {
31.   opacity: 0;
32.   visibility: hidden;
33.   transition: opacity .3s, visibility .3s;
34. }
35. .modal-wrapper:target {
36.   opacity: 1;
37.   visibility: visible;
38.   transition: opacity .4s, visibility .4s;
39. }
40. .modal-wrapper::after {
41.   display: inline-block;
42.   height: 100%;
43.   margin-left: -.05em;
44.   vertical-align: middle;
45.   content: ""
46. }
47. .modal-wrapper .modal-window {
48.   box-sizing: border-box;
49.   display: inline-block;
50.   z-index: 20;
51.   position: relative;
52.   width: 85%;
53.   max-width: 400px;
54.   padding: 0;
55.   vertical-align: middle
56. }
57. .modal-wrapper .modal-window .modal-content {
58.   max-height: 80vh;
59.   overflow-y: auto;
60. }
61. .modal-overlay {
62.   z-index: 10;
63.   position: absolute;
64.   top: 0;
65.   right: 0;
66.   bottom: 0;
67.   left: 0;
68.   background: rgba(0, 0, 0, .8)
69. }
70. .modal-wrapper .modal-close {
71.   z-index: 20;
72.   position: absolute;
73.   top: 2px;
74.   right: 2px;
75. }
76. .modal-wrapper .modal-close:hover {
77.   color: #2b2e38 !important
78. }