LightBox風にコンテンツを表示するModalbox

Check このエントリーをはてなブックマークに追加

配布元：Modalbox
ライセンス：不明

ModalboxはLightBox風にコンテンツを表示するjavascriptライブラリになります。

Modalboxを使えば画面遷移することなく、コンテンツを表示する事が可能です。

設定方法

Modalboxはprototype.jsとscriptaculous.jsを利用しています。
ダウンロードしたprototype.jsとscriptaculous.js、そしてmodalbox.jsをhead要素などで読み込みます。

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="lib/scriptaculous.js"></script>
<script type="text/javascript" src="modalbox.js"></script>

modalbox.cssも読み込んでおきます。

<link rel="stylesheet" href="modalbox.css" type="text/css" media="all">

コンテンツを表示するリンクなどにに対して以下のようなonclick属性を追加します。

<a href="読み込むファイル" title="タイトル" onclick="Modalbox.show(this.href, this.title); return false;">

これでクリックされた際に、読み込んだファイル内のコンテンツがページ内に表示されるようになります。

サンプル

表示するコンテンツのサイズなどを指定する際は第２引数で指定していきます。(単位はpx)

<a href="読み込むファイル" title="タイトル" onclick="Modalbox.show(this.href, {title:this.title,width:200,height:500}); return false;">

サンプル

最近のブラウザはポップアップブロッカーが付いているので、ちょっとしたコンテンツを表示する際にはポップアップより、このライブラリの方が好ましいのではないでしょうか？

スポンサードリンク

コメント

カテゴリー：prototype.js script.aculo.us モーダルウィンドウ ライブラリ 表示