thickboxでダイアログを表示する

2012-08-08 13:00:08
Jqueryのプラグインであるthickboxを使ってダイアログを表示してみよう。まずはheadタグ内でjqueryを読み込んだ後にthickbox.jsを読み込む。順番が逆だと動きません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" />
<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="libs/thickbox.js"></script>

あとはテキストリンクにclass指定でthickboxを宣言し、リンクを貼るだけで設置完了です。リンクのパラメータにはheightとwidthを必ず指定しなければいけません。リンク先はHTMLや画像、PHPでさらに独自のパラーメーターを付け足すことも可能です。

<テキストリンク~ダイアログ表示>


<a href="sample.html?height=600&width=600" class="thickbox">サンプル</a>

ボタンでダイアログを呼び出す場合は、alt属性にリンク先をつけます。

<ボタン~ダイアログ表示>


<input type="button" value=" サンプル " alt="sample.html?height=600&width=600" class="thickbox" />

ダイアログをボタンで閉じる場合はtb_removeを呼び出してください。
<input type="button" value="閉じる"  onclick="tb_remove()" />
カテゴリ: Javascript