thickboxでダイアログを表示する
2012-08-08 691 1631Jqueryのプラグインである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()" />
