【CSS】JS不要！チェックボックスを使って、モーダルを実装する方法

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;
}