実装が簡単で、動作も快適!CSSのみで実装されたアニメーションも気持ちいいモーダルボックス- Light Modal

一昔前までは、完全にJavaScriptの領域でした。
IE9+を含む、すべてのモダンブラウザで動作する、CSSで実装されたモーダルボックスを紹介します。

非常に軽量なので動作も快適、そして実装も簡単と3拍子揃ったスタイルシートです。

デモのキャプチャデモのアニメーション

Light Modal -GitHub

Light Modalのデモ

デモでは4種類のモーダルに加え、さまざまなアニメーションを利用できます。
対応ブラウザは、IE9+, Safari, Chrome, Firefoxです。

デモのキャプチャ

デモページ

広告の領域が少し多いですね、、、

1番目は上のアニメーションGIFにあるシンプルなモーダル。
2番目はそれにヘッダとフッタが加えられたモーダルです。

デモのキャプチャ

デモページ: ヘッダ・フッタ付きのモーダル

3番目は画像とキャプションで構成されたモーダル。

デモのキャプチャ

デモページ: 画像のモーダル

最後の4番目は画像をギャラリー形式で表示するモーダル。

デモのキャプチャ

デモページ: ギャラリー形式のモーダル

それぞれのモーダルを開く時は、さまざまなアニメーションを利用できます。

デモのキャプチャ

アニメーションの種類

Light Modalの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

まずは、モーダルボックスの実装です。
ヘッダとフッタが必要ない場合は、削除して利用してください。

続いて、モーダルボックスを開くトリガー。
モーダルボックスに指定した「#unique-id」をhref属性の値に記述します。

オプション

アニメーションを追加する場合は、animate.cssを外部ファイルで加え、「.light-modal-content」にアニメーションのclassを指定します。

top of page

©2017 coliss