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

サイト構築 -CSS

Post on:2017年12月1日

Light Modalのデモ

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

デモページ

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

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

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

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

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

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

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

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

アニメーションの種類

Light Modalの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <link rel="stylesheet" href="css/light-modal.min.css">
</head>

<head>

...

</head>

Step 2: HTML

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

<div class="light-modal" id="unique-id" role="dialog" aria-labelledby="light-modal-label" aria-hidden="false">
        <div class="light-modal-content animated zoomInUp">
            <!-- モーダルボックスのヘッダ -->
            <div class="light-modal-header">
                <h3 class="light-modal-heading">タイトル</h3>
                <a href="#" class="light-modal-close-icon" aria-label="close">&times;</a>
            </div>
            <!-- モーダルボックスのコンテンツ -->
            <div class="light-modal-body">
                <!-- Your content -->
            </div>
            <!-- モーダルボックスのフッタ -->
            <div class="light-modal-footer">
                <a href="#" class="light-modal-close-btn" aria-label="close">閉じる</a>
            </div>
        </div>
    </div>

</div>

</div>

</div>

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

<a href="#unique-id" class="btn">モーダルを開く</a>

1	<a href="#unique-id" class="btn">モーダルを開く</a>

オプション

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

<head>
  ...
　　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
　　<link rel="stylesheet" href="css/light-modal.min.css">
</head>

<head>

...