javascriptでスマートなポップアップを表示できるライブラリ「ModalBox」
- 2007年07月06日
- category:javascript
- Comment(0)
- Trackback(1)
最近ポップアップはあまり好印象ではないですよね。このライブラリを使えば、ポップアップがLightBox風のインターフェースで見た目も使いやすさも格段によくなります。
実際にサンプルをご覧下さい。
サンプル
ダウンロードは下記サイトからどうぞ。
http://wildbit.com/demos/modalbox/
使い方は簡単で、まずjavascriptとcssを読み込みます。このライブラリはprototype.jsとscript.aculous.jsを使用するのでそちらを先に読み込みましょう。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=builder,effects"></script>
<script type="text/javascript" src="modalbox.js"></script>
<link rel="stylesheet" href="modalbox.css" type="text/css" />
あとはaタグなどにイベントを追加するだけです。
<a href="/sample/html/070705.html" title="ModalBoxのサンプル" onclick="Modalbox.show(this.title,this.href,{width:400,height:200});return false;">サンプル</a></p>
Modalbox.show()の引数にはtitle、url、オプションの順で入ります。aタグだけでなくボタンなどでも可能です。
<input type="button" value="サンプル" onclick="Modalbox.show('ModalBoxのサンプル',"/sample/html/070705.html",{width:400,height:200})">
このライブラリにはウインドウを閉じる機能もあります。閉じるボタンをつける際には下記のように書きます。
<a href="javascript:void(0);" onclick="Modalbox.hide()">閉じる</a>
もっと詳しい使い方や設定できるオプションの詳細は配布元に記載されています。
- Prev Entry
- jQueryで簡単UserAgent判別
- Next Entry
- 自分のHTMLとプログラムのレベル
トラックバックURL
http://webtech-walker.com/archive/2007/07/06013927.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
トラックバック一覧
jiroの日記 2007年9月18日 00時19分
JavaScriptでモーダルダイアログをシミュレートする
前回の記事でjxDialogを作成しましたが、ちょっと調べてみると随所でModalBoxという同様のライブラリが紹介されています。すでにあったのですね。…