CSSのみでモーダルを作る

背景

cssのみでモーダルを作れることを知り、簡単なものを作ってみました。

HTML

まずはHTMLから。

modal.html

<input type="checkbox" id="toggle">
<label for="toggle">open modal</label>

<dialog>
  <p>This is a Modal</p>

  <label for="toggle">close Modal</label>
</dialog>

inputのところが注目ポイントですね。type="checkbox"にしてそれをcssでcheckedで判別します。
またdialogの部分がモーダルになります。

CSS

次にCSSです。

modal.scss

# toggle {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

# toggle:checked ~ dialog {
  display: block;
}

//ここからは見た目の調整

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

label {
  border: 5px solid gray;
  background-color: gray;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

dialog {
  border-radius: 5px;
  
  p {
    color: black;
  }
}

以上でいけているはずです。

完成

クリックすると

まとめ

とても簡単なものでしたが、CSSのみでモーダルを作ってみました。
参考になれば幸いです。