モーダルウィンドウを表示するWebサービスは多々あります。そうした時にはJavaScriptでイベントをフックして、モーダルコンテンツを表示するというものが多いかと思います。つまりJavaScriptがオフになると使えない機能です。 そこで使ってみたいのがPure CSS modalです。なんとスタイルシートだけで実現されているモーダルウィンドウです。

Pure CSS modalの使い方

モーダル表示の一例です。

フルスクリーン表示もできます。

実行例です。表示される際のアニメーションもサポートされています。

スタイルシートだけ、ということを聞けばピンと来るでしょうが、実体はチェックボックスやラジオボタンです。そのchecked指定によってモーダルの表示と非表示を切り替えています。しかしJavaScriptのモーダルとほぼ変わらない動作が実現できており、静的なモーダルコンテンツを表示するのであれば十分と言えるでしょう。

Pure CSS modalはCSS3製のオープンソース・ソフトウェア（MIT License）です。

Pure CSS modal jorgechavz/pure-css-modal: Popup CSS modal. No javascript.