JavaScriptが苦手、あるいは使えない状況でも、モーダルの表現が可能です。
探すと素っ気ないモーダルはあるのですが、アニメーションの演出が付いているものがなかったので、作成しました。
スタイルシートの:targetがポイントになります。
まずはこちらをクリック。
aタグなので、URLに「#demo_modal」が付きます。
×
モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。
<a href="#demo_modal">モーダルを開く</a> <div class="modal_box" id="demo_modal"> <a href="#" class="close_bg"></a> <div class="modal_body"> <a href="#" class="close">×</a> モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。モーダルの中身です。 </div> </div>
HTMLはこうなっています。
次にCSSです。
.modal_box { display: none; } .modal_box:target { z-index:100; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .modal_box .modal_body { width: 300px; position: fixed; padding: 20px; background-color: #FFF; border-radius: 10px; top: 40%; } .modal_box:target .modal_body { animation: anime1 1s ease ; } @keyframes anime1 { 0% { top:45%; opacity: 0; } 100% { top:40%; opacity: 1; } } .modal_box .close { position: relative; display: block; text-decoration: none; } .modal_box:target .close { animation: anime2 2s ease ; } @keyframes anime2 { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } .modal_box .close { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; cursor: pointer; } .modal_box:target .close_bg { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,0.7); cursor: pointer; }