[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal

モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。

leanModal - a jQuery modal plugin that works with your CSS
デモページ

[ad#ad-2]

デモは二つ用意されています。

デモページ：ベーシック コンテンツ

デモページ：サインアップフォーム

leanModalの主な特徴

• モーダルウインドウが簡単に実装できます。
• 超軽量（780バイト）です。
• 幅と高さをカスタマイズできます。
• 画像は使用しません。
• 1ページに複数のモーダルボックスを設置できます。
• ログインフォーム、サインアップフォーム、アラートパネルなども可能です。
• オーバーレイはスタイルシートで簡単にカスタマイズできます。

非対応

スーパーシンプルなため、下記には対応していません。

• ギャラリー機能
• iframeコンテンツの表示
• AJAXコンテンツの表示
• IE6

leanModalの実装

Step 1

「jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="path_to/jquery.min.js"></script>
<script type="text/javascript" src="path_to/eanModal.min.js"></script>

Step 2

オーバーレイのスタイルシートを記述します。「display: none;」は忘れずに。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

Step 3

モーダルウインドウを呼び出すトリガーを指定します。

$(function() {
    $("#trigger_id").leanModal();		
});

複数のモーダルウインドウを設置する場合は、下記のように記述します。

$(function() {
    $("a[rel*=leanModal]").leanModal();		
});

スクリプトのオプション

オプションは、トップからの位置、オーバーレイの不透明度、の二つです。デフォルトは、トップからの位置は100px、オーバーレイの不透明度は0.5、です。

$(function() {
    $("#trigger_id").leanModal({ top : 200, overlay : 0.4 });		
});

[ad#ad-2]