on:2017年12月1日sponsors一昔前までは、完全にJavaScriptの領域でした。IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイルシートです。Modalのデモデモでは4種類のモーダルに加え、さまざまなアニメーションを利用できます。デモページ広告の領域が少し多いですね、、、1番目は上のアニメーションGIFにあるシンプルなモーダル。2番目はそれにヘッダとフッタが加えられたモーダルです。ヘッダ・フッタ付きのモーダル3番目は画像とキャプションで構成されたモーダル。画像のモーダル最後の4番目は画像をギャラリー形式で表示するモーダル。ギャラリー形式のモーダルそれぞれのモーダルを開く時は、さまざまなアニメーションを利用できます。外部ファイル当スタイルシートを外部ファイルとして記述します。HTMLまずは、モーダルボックスの実装です。ヘッダとフッタが必要ない場合は、削除して利用してください。aria-label="close">閉じる</a></div></div></div>続いて、モーダルボックスを開くトリガー。モーダルボックスに指定した「#unique-id」をhref属性の値に記述します。class="btn">モーダルを開く</a>オプションアニメーションを追加する場合は、animate.cssを外部ファイルで加え、「.light-modal-content」にアニメーションのclassを指定します。