LightBox風にコンテンツを表示する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;">

サンプル

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

関連エントリー

min-width,max-width,min-height,max-heightをIEで使えるようにするjavascript
ブロックレベル要素の高さを揃えるheightLine.js
IEでposition:fixedを再現するFixed positioning
テーブルをソートできるようにするjsライブラリ-table sorting
画像に鏡面効果を与えるreflection.js
半角ｶﾅを全角カナに変換するjsライブラリ
ロールオーバーを簡単に実装する-Image Rollover Code-

スポンサードリンク

«Web屋さんのためのMovable Type4 | メイン | 独立開業»