Modal WindowやLightBoxを実装できるライブラリ Control.Modal

2007年3月31日

Modal Windowとは一度開いた窓を閉じるまで、他の操作をできなくするタイプの窓という意味。LightBoxを使ったことのあるユーザーならなんとなく感覚を理解することができると思う。
今回ご紹介するライブラリControl.ModalはHTMLやiflameでページを表示させる事やイメージをLightBox風に表示させるようなModal Windowをコントロールするためのライブラリになる。

Control.Modal

実装はPrototype v.1.5とcontrol.modal.jsを読み込むことで実装できる。

特徴としてEvent.observeで指定したIDに関数を指定してコンフィグレーションやCSSをつけて使用する。コンフィグレーションを1行で記述することができ、CSSでレイアウトをつけれたりするので、調整やカスタマイズがしやすく、結構幅広いアレンジが効くんじゃないかと思う。動作の指定は以下の通り。

<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
});
new Control.Modal($('hoverbox_link'),{
hover: true,
position: 'relative',
offsetLeft: 120
});
});
</script>

上記のコードはControl.ModalのExamplesのリンクをクリックするデモで動作を確認することができる。

このライブラリはprototype.jsを使い、Event.observeで関数を記述するので、その他のEvent.observeで関数を記述して使うjavascriptライブラリと組み合わせることで、管理が簡単になり且つ、色んな機能を実装することできるようになるので結構便利かもしれない。