前々から「CSSだけでお洒落なモーダルウィンドウ作れないかな～」と思って色々と試していたんですが、ようやく納得のいく出来の物が完成したので載せておきます。
仕組みは後で解説するとして、とりあえず作ったサンプルを5つ紹介します。
一応、画面外をクリックしてウィンドウを閉じる機能にも対応していますし、ピュアCSSのモーダルウィンドウにしては珍しい閉じる際のアニメーションも実現できました。
See the Pen PureCSS ModalWindow (Normal) by Kuzlog (@Kuzlog) on CodePen.
See the Pen PureCSS ModalWindow (Top) by Kuzlog (@Kuzlog) on CodePen.
See the Pen PureCSS ModalWindow (Zoom-1) by Kuzlog (@Kuzlog) on CodePen.
See the Pen PureCSS ModalWindow (Zoom-2) by Kuzlog (@Kuzlog) on CodePen.
See the Pen PureCSS ModalWindow (Rotate) by Kuzlog (@Kuzlog) on CodePen.
先程紹介した「通常パターン」のソースがこちらです。一通り目を通せば分かr…分からないですねこれ。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="modal_wrap"> <input id="trigger" type="checkbox"> <div class="modal_overlay"> <label for="trigger" class="modal_trigger"></label> <div class="modal_content"> <label for="trigger" class="close_button">✖️</label> <h2>Modal Content</h2> <p>Lorem ipsum ...</p> </div> </div> </div> |
|
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 |
.modal_wrap input{ display: none; } .modal_overlay{ display: flex; justify-content: center; overflow: auto; position: fixed; z-index: 9999; width: 100%; height: 100%; background: rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.5s, transform 0s 0.5s; transform: scale(0); } .modal_trigger{ position: absolute; width: 100%; height: 100%; } .modal_content{ position: relative; align-self: center; width: 60%; max-width: 800px; padding: 30px 30px 15px; box-sizing: border-box; background: #fff; line-height: 1.4em; transition: 0.5s; } .close_button{ position: absolute; top: 14px; right: 16px; font-size: 24px; cursor: pointer; } .modal_wrap input:checked ~ .modal_overlay{ opacity: 1; transform: scale(1); transition: opacity 0.5s; } |
なんとなく雰囲気だけ掴んでください…仕組みを1から解説出来るほどの気力はないので、重要なポイントだけ解説します。
:checkedというのはCSS3の擬似クラスで、一般的にはチェックされている要素（radioとかcheckbox）のスタイルを変化させる際に使用されます。
こいつと間接セレクタ（E ~ F）、さらにinput要素と紐付けしたlabel要素を無理やり組み合わせれば、チェックされている状態とチェックが外れている状態でスタイルを制御して、隠していた要素をクリックで表示させるという挙動をCSSのみで実装可能になります。
さらに、画面全体を覆うlabel要素をモーダルウィンドウとページ全体の“間のレイヤー”に仕込んでおくことで、画面（モーダルウィンドウ）外をクリックした際の非表示機能を作ることも可能です。
このコードでは、モーダルウィンドウ及び背面のオーバーレイ部分をtransform: scale(0);で隠しています。普通に考えて、要素を隠すときはdisplay:none;を使いますよね。
ただ、今回はクリックでスタイルを変更するという仕組みのため、displayを使って要素の表示・非表示を切り替えると、どうしてもウィンドウを閉じるときのアニメーションが作れなかったんです…そりゃ一瞬で非表示になりますからね。実際、他の人が作ったPureCSSモーダルウィンドウを見てみると、閉じるときのアニメーションまで実装されているものはほとんどありません。
そんなのやだ！絶対やだ！！って事で、結局scale(0)で強引に隠すことにしました。これならモーダルウィンドウを閉じた際の徐々に背景が明るくなっていくようなエフェクトが簡単に掛けられます。
こんな隠し方をしていいのか分からない上に、全部作った後で「あれ？これanimation使えばdisplay:none;でもいけたんじゃね？」って事に気付いたのは秘密。
実用する人はいないと思いますが、無理やり作ったのでいくつか注意点があります。
色々と試行錯誤したんですが、スクロール時の画面外クリック対応は最後の最後まで作れませんでした…なんとかならねえのかなこれ。誰か助けてください。
使う使わないは別として、CSSだけでもここまで作れる！という楽しさが伝われば嬉しいです。PureCSSもっと流行って♥
