Control.Modal is a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using HTML that is already on the page, images, AJAX calls or iframes.

様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」。
LightBox は、同じウィンドウ内で背景を暗くしてブロック要素を前面に表示するライブラリですが、同等の仕組みを非常に簡単に実装することができます。

ツールチップ風にボックス要素を表示するなど、サイトにふんだんに使えそうな機能が盛り込まれていて覚えておくと何かと便利そう。



ボックス要素を画面の中央に表示したり、クリックしたその位置で表示したり、Ajaxで内容を書き換えたり、IFRAMEで内容を表示したり、画像をそのまま表示したりとかなり多機能。

実装する際のソースコードも次のようにかなりシンプル。
HTMLとJavaScriptは分離されていて別ファイルにすることも出来ますね。

<!-- HTML -->
<div id="modal_window_one">Example One</div>
<div id="modal_window_two">Example Two</div>
<ul>
<li><a href="#modal_window_one" id="modal_link_one">Relative Modal</a> - Opens a local modal window relative to the position of the link. With custom width and height.</li>
<li><a href="#modal_window_two" id="modal_link_two">Centered Modal</a> - Opens a local modal window in the center of the screen. Adds CSS classes to the container and overlay.</li>
<li><a href="http://livepipe.net/projects/control_modal/modal_ajax" id="modal_link_three">AJAX Modal</a> - Opens a modal window that is the response of an AJAX call.</li>
<li><a href="http://livepipe.net/projects/control_modal/modal_iframe" id="modal_link_four">iframe Modal</a> - Opens a modal window that contains an iframe.</li>
<li><a href="http://livepipe.net/ryan/photos/photos/Plants/Banners_Closeup.jpg" id="lightbox_link_one">Lightbox One</a> - Opens a modal window with an image inside.</li>
<li><a href="http://livepipe.net/ryan/photos/photos/Water/Skippers_Creek.jpg" id="lightbox_link_two">Lightbox Two</a> - Opens another modal window with an image inside.</li>
</ul>
<!--JavaScript-->
<script>
Event.observe(window,'load',function(){
new Control.Modal($('modal_link_one'),{
opacity: 0.8,
position: 'relative',
width: 200,
height: 200
});
new Control.Modal($('modal_link_two'),{
containerClassName: 'test',
overlayClassName: 'test'
});
new Control.Modal($('modal_link_three'));
new Control.Modal($('modal_link_four'),{
iframe: true
});
new Control.Modal($('lightbox_link_one'));
new Control.Modal($('lightbox_link_two'),{
opacity: 0.75
});
});
</script>

JavaScript では window.onload イベントによってコンポーネントの初期化を行っています。
Control.Modal( element, {options} ); という非常にシンプルな使い方となってて、 options に渡すパラメータを変えることで様々な利用ができるという感じの様子です。

尚、このライブラリの利用にあたってはprototype.jsが必要です。

関連エントリ

• グレーアウト表示ライブラリ:glayer.js