LightBox風にコンテンツを表示するModalbox
配布元: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;">
これでクリックされた際に、読み込んだファイル内のコンテンツがページ内に表示されるようになります。
表示するコンテンツのサイズなどを指定する際は第2引数で指定していきます。(単位はpx)
<a href="読み込むファイル" title="タイトル" onclick="Modalbox.show(this.href, {title:this.title,width:200,height:500}); return false;">
最近のブラウザはポップアップブロッカーが付いているので、ちょっとしたコンテンツを表示する際にはポップアップより、このライブラリの方が好ましいのではないでしょうか?
スポンサードリンク
コメント
カテゴリー:prototype.js script.aculo.us モーダルウィンドウ ライブラリ 表示
直前:min-width,max-width,min-height,max-heightをIEで使えるようにするminmax.js