Thickboxで読み込んだHTMLからウィンドウを閉じる

ThickBoxはLightBox系のjQueryプラグインとしては最も良く使われる部類に入るのではないでしょうか?

ThickBoxは画像だけでなくHTMLも読み込めてとても便利なのです。ただ、デフォルトでは右上のcloseと書かれたテキストをクリックするか、暗転している部分をクリックしないと元の画面に戻りません。リテラシーの低い人は一瞬どこをクリックして閉じるのか分からない事もあるかもしれません。そこでHTML側にウィンドウを閉じるボタンを付けてみることにします。

通常ThickBoxはtb_remove()と言うメソッドを呼び出してウィンドウを閉じます。ただ読み込まれたHTMLファイルの閉じるボタンのclickイベントにtb_remove()を設定したとしてもイベントは実行されません。これは読み込む側と読み込まれる側に親子の関係があるからです。

そこでclickイベントの記述を次のように変更します。

onclick="javascript:parent.tb_remove();"

イベントに親(parent)フレームを指定してあげればtb_remove()メソッドを実行出来ます。

ちなみにThickBoxはHTMLを読み込む方法が2種類存在します。一つはiframeで読み込む方法でもう一つは非同期で読み込む方法です。

UTF-8で書かれたHTMLファイルでThickBoxを利用する場合はどちらでも大丈夫ですが、Shif-JISなどで書かれたHTMLファイルでThickBoxを利用すると後者の方法でHTMLファイルを読み込むと文字化けしてしまいます。その場合はiframeで呼び出せば文字化けを防げます。

iframeで呼び出す記述

<a href="URI?keepThis=true&TB_iframe=true&height=Value&width=Value" class="thickbox">text</a>

非同期で読み込む

<a href="URI?height=Value&width=Value" class="thickbox">text</a>

どちらもURIにはファイル名、valueにはwidth、heightの値を入れます。

View Demo