ModalBox ? An easy way to create popups and wizards

JavaScriptでLightBox風のインストーラ用ウィザード作成ライブラリ「ModalBox」。


次のように、LightBox風に同一ページ内で動作するウィザードを作成することが出来ます。
動画が軽くてサクサク動くこのUI は使いどころによってはかなり便利なサイトであるという印象を与えることが出来そう。



実装方法は次の流れ

1) まず、JavaScriptファイルとCSSファイルを読み込みます。

<script type="text/javascript" src="includes/prototype.js"></script>
<script type="text/javascript" src="includes/scriptaculous.js"></script>
<script type="text/javascript" src="includes/modalbox.js"></script>
<link rel="stylesheet" href="includes/modalbox.css" type="text/css" media="screen" />

2) Modalboxクラスのshowメソッドを呼び出します。

<button type="button" onclick="Modalbox.show('Sending status',
'frame_send-link-done.html', {width: 460, height:150});
return false;">Send link</button>

と、実にこれだけの容易さとなっています。

引数は次のような内容で指定。
Modalbox.show( タイトル, ＵＲＬ, オプション );

次のようなコールバック関数も使えて独自カスタマイズしやすいですね。

• Modalbox.afterLoad(読み込んだ後に実行)
• Modalbox.afterHide(隠した後に実行)
• Mdalbox.onShow(表示時に実行)

関連エントリ

• JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」
• 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」
• 滑らかな画像スライドショーを実現するJavaScriptライブラリ