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

2012-08-08    764   1781

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()" />

カテゴリ: jQuery

comment 登録なしでご自由にご入力いただけます(^^)ぜひぜひ記事のご感想をお聞かせ下さい。

お名前とコメントは入力必須です。

コメントの文字数が短すぎます。

この内容でコメントを送る
コメントをする

目が疲れている方向けにラジオ系Youtubeを始めました

オススメのjQueryに関する記事

この記事がお役に立てましたら是非シェアのご協力お願いします。