Weblasts

cssだけでモーダルウィンドウ

擬似クラスを組み合せてモーダルウインドウを作ったので書き残しておくことにします
レスポンシブにも対応していると思います。
戻るときにアニメーションさせるのがめんどくさかったのできゅっと戻ります

こんな形でもいいよって方はどうぞ

HTMLのコード

今回の作例では簡素なコードにしてみました
画像をボタンにすべくコントロールにはID属性を
画像にはlabel要素を組み合わせてあります
CSSを指定しやすいように順番を整えておくことがキモ

よく見る作例だと背景用の要素が用意されている場合がほとんどですが、ここでは邪魔なので入れずにマークアップしています。 背景用の要素の有無はどっちでもいいと思いますので、今回は無しで行きます

CSS

CSSはアニメーションを多用するのでまずは基本設定の方から
横並びに並べておきます

背景を出すためのコード

画像をクリックしたらまず黒い背景を出していきたいのでこの設定からしていきます。
どこをクリックしても戻れるように背景は「label要素」を使って表示していきます。

少し冗長な書き方になっていますが、クリックした画像のlabel要素を絞り込んで指定するようにしています。
順番がぐちゃぐちゃですがpositonをfixedにして要素を画面全体に広げています。
画僧のセンタリングはflexで対応。animationプロパティを使ってアニメーションさせています

画像の方のCSS

画像は徐々に大きくなって出てくるような動きにしたいので、こちらもアニメーションを指定しています。 色々な画面幅に対応できるよう最大値を使って指定しました。

背景が出てきてから画像を出したいので、アニメーションを遅延させています。

閉じるボタンを設置

今回のものはどこをクリックしても閉じますが、分かりやすいように閉じるボタンも設置します。 擬似要素で追加するのがよさそうなので擬似要素を作りましょう。

画像だけではなくコンテンツを入れたい場合はもう一工夫必要ですが、画像だけであればこのぐらいで書けます。
どうしてもCSSだけで対応したいのであれば一考してみてはいかがでしょうか。

まとめ コピペ用CSS

コンテンツをはめ込む方法は気が向いたときにまとめます