input typeのcheckboxを使って、モーダルを実装する方法を紹介する。
JavaScriptのコーディングは不要なので、JSが苦手な人にもおすすめだ。
簡単かつシンプルな、モーダルを実装したい場合は、検討しても良いだろう。
表示結果
See the Pen eYBPmJj by 山崎毅 (@nbudjgzu) on CodePen.
HTML
<label for="modal-check">Open</label>
<input type="checkbox" id="modal-check">
<div class="modal">
<label for="modal-check">Close</label>
<p>モーダルコンテンツ表示エリア</p>
</div>
CSS
.modal {
display: none;
width: 200px;
height: 200px;
background-color: #ccc;
position: fixed;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
margin: auto;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, .8);
}
#modal-check {
display: none;
}
#modal-check:checked + .modal {
display: block;
padding: 10px;
box-sizing: border-box;
}
label {
cursor:pointer;
}
(Visited 2,141 times, 1 visits today)