ページ内に様々なwindowを表示するControl.Modal
配布元:Control.Modal
ライセンス:MIT license
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>
まとめ
組み合わせにより多様すぎるくらいの表現が可能ですが、その分、敷居は高いです。
ある程度のプログラミングの知識は必要かもしれません。
スポンサードリンク