[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex

カスタマイズ性に優れ、シンプルなものからカラフルなものまでさまざまなテーマも用意されており、簡単に実装できる超軽量（6KB）のjQueryのプラグインを紹介します。

レスポンシブ対応、IE8+もサポート、ウインドウを表示する際のアニメーションも優雅でいい感じ！

vex
vex -GitHub

• vexのデモ
• vexの使い方

vexのデモ

デモではvexのさまざまなスタイルをショー形式で楽しむことができます。
Chrome, Safari, Firefox, Opera, IE8+でご覧ください。

デモページ

右の黒いボタン「Demo」をクリック（タップ）すると、モーダルウインドウのショーが始まります。

ワイヤーフレームのスタイル

デモではさまざまなスタイルのモーダルウインドウが次々に表示されます。

OSのスタイル

フラットのスタイル

通常の利用シーンに合わせたデモも用意されています。

Demo: Basic

テーマも数多く用意されており、下記ページで楽しむことができます。

Demo: Themes

ウインドウはページの中央に表示するだけでなく、ページの上からスライドさせたり、右下からスライドさせたりなどもできます。

vexの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト、スタイルシートを外部ファイルとして記述します。
テーマを使用する場合は、JavaScriptでテーマを指定し、専用のスタイルシートも加えます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />

Step 2: HTML

モーダルウインドウを表示するトリガーにclassを付与します。

<a class="demo-alert">alert</a>

Step 3: JavaScript

jQueryのセレクタでトリガーを指定し、ウインドウの種類と表示するコンテンツを記述します。

<script>
$('.demo-alert').click(function(){
    vex.dialog.alert('テキスト');
});
</script>