"smartModalWindow" jQuery plugin
Description
このスクリプトはjQueryプラグインです。
指定した要素からのリンクされているドキュメントを、モーダルウィンドウ（通称Lightbox）で表示します。ドキュメントの呼び出しにはAjaxを使っています。WebKit搭載ブラウザで実行すると、モーダルウィンドウの開閉時にアニメーションを伴います。
もともとはiPhone/iPod touch/iPadのSafariに最適化したUIを実現するために制作したものなので、少々挙動にクセがあります。PC向けのウェブサイト用途であれば一般的なLightboxクローン（fancyboxなど）をオススメします。
Demos
Open Modal Contents!!Usage
Step01
head要素内で jquery.smartModalWindow.jsと、jquery.smartModalWindow.cssをそれぞれ読み込みます。もちろん、jquery.jsを読み込んだ後に読み込みましょう。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.smartModalWindow.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.smartModalWindow.css" />Step02
Step01の通りスクリプトファイルを読み込んだ後に、以下の例のように実行します。
モーダルウィンドウ表示のトリガーとなる要素をjQueryセレクタで指定して、実行します。引数でオプションを指定できます。
<script type="text/javascript">
$(function() {
$("a.openModal").smartModalWindow({
// some options...
});
});
</script>
...
<a href="modal.html" class="openModal">Open Modal Contents!!</a>オプションの一覧は次の表の通りです。
| オプション名 (option name) |
デフォルト値 (default value) |
備考 (note) |
|---|---|---|
| url | $(triggerElement) .attr('href') |
モーダルウィンドウで表示するドキュメントのURLを指定します。デフォルト値はリンク先（href属性の値）のドキュメントになります。 |
| bodyContainer | 'div.area_container' | 通常コンテンツのコンテナをセレクタで指定します。 |
| modalContainerClassName | 'modal_container' | モーダルコンテンツのコンテナとなるdiv要素のクラス名となります。デフォルト値から変更する場合はjquery.smartModalWindow.css内の指定も合わせて変更する必要があります。 |
| closeModalTriggerButton | 'a.closeModal' | モーダルウィンドウを「閉じる」要素をセレクタで指定します。 |
| closeModalTriggerEvent | 'click' |
closeModalTriggerButtonオプションで指定した要素に対して「閉じる」トリガーとなるイベントハンドラを指定します。半角スペース区切りで複数指定可能です。'click touchend'など。
|
| overlayClassName | 'modal_overlay' | モーダルコンテンツ表示の際に表示するオーバーレイ要素のクラス名となります。デフォルト値から変更する場合はjquery.smartModalWindow.css内の指定も合わせて変更する必要があります。 |
| loadingImgSrc | 'loading.gif' | ローディング中を表す画像へのパスを指定します。 |
| loadingImgClassName | 'loadingImg' | ローディング中を表すimg要素のクラス名となります。デフォルト値から変更する場合はjquery.smartModalWindow.css内の指定も合わせて変更する必要があります。 |
| triggerEvent | 'click' |
jQueryセレクタで指定した要素に対してモーダルウィンドウを開くトリガーとなるイベントハンドラを指定します。半角スペース区切りで複数指定可能です。'click touchend'など。
|
| enableClassName | 'moda_on' | モーダルウィンドウを表示する時にモーダルコンテンツのコンテナに追加されるクラス名となります。デフォルト値から変更する場合はjquery.smartModalWindow.css内の指定も合わせて変更する必要があります。 |
| disableClassName | 'modal_off' | モーダルウィンドウが閉じられた時にモーダルコンテンツのコンテナに追加されるクラス名となります。デフォルト値から変更する場合はjquery.smartModalWindow.css内の指定も合わせて変更する必要があります。 |
Download
smartModalWindow - Version: 0.5.1
※zipアーカイブに含まれるファイルのうち、loading.gifは Chimply generates your images で生成したものです。
License
History
| 2010-11-01 | Ver. 0.5.1 | 公開 |