Web開発など

Java, JS, CSS, HTML, Unity, C# のことなどを書いてます。フリーソフトや二次創作の公開もしています。

CSSだけでモーダル表示

JavaScriptCSSフレームワークを使わずに、モーダルを表示したいときがありました。色々と調査していたら、CSS(と HTML)だけでモーダルを表示できる Pure Css Modal というものを見つけました。

今回はそのことについて書いていきます。

画面デモ

公式のGitHubページ で、モーダルの表示を画面で確認できます。

モーダルの出現方法(中央から、左から中央、右から中央、等々)や、モーダルの大きさもカスタマイズできそうでした。

仕組み

Pure Css Modal のデモとソースを見てみたら、HTML のラベルとチェックボックスを使って表示していました。

ラベルをクリックすると隠れているチェックボックスがチェックされて、疑似要素(input:checked)のスタイルが有効になるのかと思いました。