Web系開発メモ

Java, JavaScript, CSS, HTML など、Webアプリの記事を中心に書いています。

CSSだけでモーダル表示

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

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

画面デモ

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

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

仕組み

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

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