CSSのみでポップアップ画面を表示
JavaScriptが使えないけれどポップアップで表示させたい
以下の機能を持つポップアップを作成します。
- 画像をクリックすることでポップアップを表示
- 任意の場所をクリックでポップアップを閉じる
- 閉じるボタンも表示する（ユーザビリティへの配慮）
HTML：基本の書き方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="tmb"> <label for="pop-01"> <img src="images/image_01.jpg" alt="image_01" class="tmb_img"> </label> <input type="checkbox" value="" id="pop-01"> <div class="popup"> <label for="pop-01" class="popup__btn"></label> <label for="pop-01" class="popup__btnarea"></label> <div class="popup__img"> <img src="images/image_01.jpg" alt="image_01"> </div> </div> </div> |
「tmb(thumbnailの略)」クラスが文字通りサムネイル担当、
「popup」クラスがポップアップ画面担当です。
「popup__btn」は閉じるボタン（×はCSSで表示）、「popup__btnarea」は画面いっぱいに描画してクリックを感知→閉じる役割を持っています。
時おり、labelの中にdivやimgを入れた方法を見かけますが、htmlの文法チェックでエラーが出たので採用していません。
サムネを複数配置したい場合は、labelとinputのid名を「pop-02,pop-03,…」のように変更します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.tmb { width: 50%; } .tmb_img { width: 100%; height: auto; } .tmb_img:hover { cursor: pointer; } .popup { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0); background-color: rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.3s, transform 0s 0.3s; } .popup__btn { display: block; z-index: 13; position: absolute; top: 1vh; right: 1vh; width: 5vh; height: 5vh; cursor: pointer; } .popup__btn::before, .popup__btn::after { position: absolute; top: 50%; width: 100%; height: 2px; margin-top: -1px; background-color: #fff; content: ''; } .popup__btn::before { transform: rotate(45deg); } .popup__btn::after { transform: rotate(-45deg); } .popup__btnarea { z-index: 12; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .popup__img { z-index: 11; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; } .popup__img img { width: 100%; height: 100%; object-fit: contain; } input[type="checkbox"] { display: none; } input[type="checkbox"]:checked ~ .popup { transform: scale(1); opacity: 1; transition: opacity 0.3s; } |
z-indexを利用し、上から「popup__btn」→「popup__btnarea」→「popup__img」と配置します。これでどこをクリックしてもポップアップが閉じます。
まとめ
ポップアップの作成方法は多くのサイトで紹介されていますが、何とか簡潔にできないものかと考えてひねり出した方法です。
画像の表示しか試していませんが、文章、動画の表示にも利用できるかもしれません。
