ページ内に様々なwindowを表示するControl.Modal

Control.ModalはLightBoxのようなウィンドウをページ内に表示するJavaScriptライブラリになります。

表示させる形態、表示できる内容が非常に豊富です。

設置方法

head要素内などでprototype.jsとcontrol.modal.jsを読み込みます。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="control.modal.js"></script>

準備はこれで終了です。
表示形式ごとに解説していきます。

Relative Modal

ブロックレベル要素の内容を表示し、それ以外の箇所をグレイアウトします。

サンプル

スタイルシートに以下のコードを追加します。

#modal_container {  
     padding:5px;  
     background-color:#fff;  
     border:1px solid #666;  
     overflow:auto;  
     font-family:"Lucida Grande",Verdana;  
     font-size:12px;  
     color:#333;  
     text-align:left;  
}  
#modal_overlay {  
     background-color:#000;  
}  

XHTMLには以下のコードを追加します。

<a href="#表示したいコンテンツのID" id="任意のID">Relative Modal</a>
<div id="任意のID">表示したいコンテンツの内容</div>
<script>
    new Control.Modal('a要素に設定したID',{
        opacity: 透明度,
        position: 'relative',
        width: 横幅,
        height: 高さ
    });
</script>

サンプルですと以下のような内容です。

<a href="#test_one_contents" id="modal_link_one">Relative Modal</a>
<div id="test_one_contents">
    I am the innerHTML of a div with the id "test_one_contents". You can make a modal window open relative to any element on the page.
</div>
<script>
    new Control.Modal('modal_link_one',{
        opacity: 0.8,
        position: 'relative',
        width: 300,
        height: 50
    });
</script>

Centered Modal

パラメータにcontainerClassNameやoverlayClassNameを設定することにより表示するボックス(#modal_container)とそれ以外のボックス(#modal_overlay)に任意のclassをつけることが可能です。

サンプル

<script>
    new Control.Modal('modal_link_one',{
	containerClassName: 'test',
	overlayClassName: 'test',
	width: 300
    });
</script>

AJAX Modal

href属性にURLを設定するとAjaxを利用してurlの内容を取得します。

サンプル

<a href="http://blog.webcreativepark.net/sample/js/32/index3.txt" id="modal_link_one">AJAX Modal</a>
<script>
    new Control.Modal('modal_link_one');
</script>

IFrame Modal

iframeでサイトなどを表示することも可能です。

サンプル

<a href="http://blog.webcreativepark.net/" id="modal_link_one">AJAX Modal</a>
<script>
    new Control.Modal('modal_link_one',{
	iframe: true,
	width: 900,
	height: 480
    });
</script>

Simple Lightbox

href属性に画像を設定すればLightboxのように使用することも可能です。

サンプル

<a href="○○.jpg" id="modal_link_one">Simple Lightbox</a>
<script>
    new Control.Modal('modal_link_one');
</script>

Lightbox w/Effects

パラメーターにfade: trueを付加することによりエフェクトをつけることが可能です。

エフェクトにはscript.aculo.usを使用している為、script.aculo.usのファイルをアップロードしてeffect.jsを読み込んでおく必要があります。

サンプル

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="control.modal.js"></script>
<a href="sample.jpg" id="modal_link_one">Lightbox w/Effects</a>
<script>
		new Control.Modal('modal_link_one',{
			fade: true
		});
</script>

Hoverbox

マウスオーバーした際にボックスを表示できます。

サンプル

<a href="#hoverbox" id="modal_link_one">Hoverbox</a>
<p id="hoverbox">マウスオーバーした際にボックス</p>
<script>
		new Control.Modal('modal_link_one',{
			hover: true, 
			position: 'relative', 
			offsetLeft: 100
		});
</script>

a要素以外にも使用できます。

サンプル

<span id="modal_link_one">Hoverbox</span>
<script>
		new Control.Modal('modal_link_one',{
			hover: true, 
			position: 'relative', 
			offsetLeft: 120, 
			contents: 'マウスオーバーした際にボックス'
		});
</script>

Tooltip

position: 'mouse'でツールチップとしても使用できます。

サンプル

<span id="modal_link_one">Tooltip</span>
<script>
		new Control.Modal('modal_link_one',{
			position: 'mouse', 
			offsetTop: 20 , 
			contents: 'マウスオーバーした際にボックス'
		});
</script>

まとめ

組み合わせにより多様すぎるくらいの表現が可能ですが、その分、敷居は高いです。
ある程度のプログラミングの知識は必要かもしれません。

関連エントリー

Lightboxを使い画像を拡大表示する。
吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
LightBox風にコンテンツを表示するModalbox
画像に鏡面効果を与えるreflection.js
クロスフェードを実装する為のCrossfader

スポンサードリンク

«KAMONジェネレーターにみるFull FlashサイトのSEO対策 | メイン | Movable Type4でページ表示用のウィジェット»