記事を読んでて、ちょっと感動したので、勉強がてらの忘備録です。
:targetを使うやつなので、
「はいはいそれね。」の方は、大事な時間をロスするかもしれません。
お戻りください。
こんな感じで動くので、ますはコードペンで実際に動かしてみてください。
https://codepen.io/AdrianBece/pen/poopaaQ
まずはコードの説明から。
<ahref="#modal">Open modal</a><divclass="modal"id="modal"tabindex="-1"><ahref="#"class="modal__overlay"aria-label="Close modal"></a><divclass="modal__content"><ahref="#"class="modal__close"aria-label="Close modal">×</a><div>Modal content</div></div></div>1行目のaタグは発火用のテキストボタンです。
続いて、モーダルをwarpしている.modal。ようはダイアログの背景です。（背景の透明のグレーとかの）
これにaタグのリンク先のid(modal)を指定。
.modal直下のaタグは、ダイアログ以外をクリックした時にダイアログ消すためのwrap。
そしてダイアログ自体は.modal__contentです。
その中にはダイアログを閉じるためのボタンと、テキストが入っています。（←中身はなんでもいい）
/* --- 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:00.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
ではでは。