ITエンジニア/デザイナ向けにオープンソースを毎日紹介

モーダルウィンドウを表示する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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2