htmlとcssのみで簡易的なダイアログを作る方法 #CSS

記事を読んでて、ちょっと感動したので、勉強がてらの忘備録です。

:targetを使うやつなので、
「はいはいそれね。」の方は、大事な時間をロスするかもしれません。
お戻りください。

こんな感じで動くので、ますはコードペンで実際に動かしてみてください。
https://codepen.io/AdrianBece/pen/poopaaQ

まずはコードの説明から。

html


<a href="#modal">Open modal</a>

<div class="modal" id="modal" tabindex="-1">
  <a href="#" class="modal__overlay" aria-label="Close modal"></a>
  <div class="modal__content">
    <a href="#" class="modal__close" aria-label="Close modal">&times;</a>
    <div>Modal content</div>
  </div>
</div>

1行目のaタグは発火用のテキストボタンです。

続いて、モーダルをwarpしている.modal。ようはダイアログの背景です。（背景の透明のグレーとかの）

これにaタグのリンク先のid(modal)を指定。

.modal直下のaタグは、ダイアログ以外をクリックした時にダイアログ消すためのwrap。

そしてダイアログ自体は.modal__contentです。
その中にはダイアログを閉じるためのボタンと、テキストが入っています。（←中身はなんでもいい）

css


/* --- Required CSS (not customizable) --- */

.modal {
  display: none;
}

.modal:target {
  display: flex;
}

/* --- Required CSS (customizable) --- */

.modal {
  text-align: left;
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2rem;
}

.modal:target {
  justify-content: space-around;
  align-items: center;
}

.modal__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: default;
}

.modal__content {
  min-width: 480px;
  position: relative;
  background-color: #f5f5f5;
  padding: 2rem;
}

.modal__close {
  color: initial;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.5rem;
  display: inline-block;
}

/* --- Codepen styles - not required --- */

body {
  padding: 2rem;
  text-align: center;
  font-size: 2rem;
}

続いてcssです。ずらっと並んでいますが、
ここでのポイントは2行目の、

.modal:target !!

擬似要素の:targetは、MDNではこう説明されています。

CSS の :target 疑似クラスは、URL のフラグメントに一致する id を持つ固有の要素 (対象要素) を表します。

.
.
.

アホな僕は頭にハテナが浮かびます。

ただ、忘れた頃に確認しに来る未来の自分に分かるよう、頑張って説明します。

今回のケースでいうと、

<a href="#modal">Open modal</a>'

のhrefで指定している#modal。これは、

<div class="modal" id="modal" tabindex="-1">

のid="modal"を指していて、
aタグをクリックしたら.modal:target{}内のcssが反映されるという仕組み。
（ちなみにcssはclassで指定していますが、#modal:target{}でも大丈夫）

今回は display: none; -> display: flex;

に切り替えるためだけに使っていますが、文字の色とか背景色なんかも変えることができますね。
hrefの指定は#からしかダメだったのでclassは無理。idで単一のターゲットにしか使えないっぽいです。

ダイアログを消すときは

<a href="#" class="modal__overlay" aria-label="Close modal"></a>

aタグのhrefを"#"だけにすることでOK！
ダイアログを消す背景部分（ダイアログの背景）にセットすると...なるほどダイアログを消せます。
closeボタンにも記述するといいですね。

一つ注意点で、aタグをpositon: absoluteで飛ばしているのは理由があって、
aタグって要素内にaタグを入れれないので、そうしています。
なのでaタグでダイアログをwrapしてしまわないように注意してください。

ちなみに:targetはほぼ全てのブラウザ（iE含めて）使えます。

まだ知ったばかりで何も試してないけど。これはちょくちょく使えるなと。
transitionとか効くのかな〜いろいろ試してみたい。

また仕様が分かってきたら、追記します。

コリスさんの記事を参考にしました。
この記事まじで神。
https://coliss.com/articles/build-websites/operation/css/css-elements-without-javascript.html

ではでは。