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

Posted by poundhound on

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

Categories: JavaScript Tags:

Comment(0) | Trackback(0)

Category:JavaScript の最近の記事

Trackback(0)

Trackback URL: http://www.nk0206.com/mt5/mt-tb.cgi/497

Leve comment

About Author

poundhound

poundhound
web-designer
  • del.icio.us
  • flickr
  • Last FM
  • tumblr

twitter

Recent Tweet

    follow me on twitter

    Life Log

    • twilog
    • twitpic
    • pick

    Categories

    Recent Entries

    Comments

    jQueryを利用したソーシャルサービスボタン生成プラグイン
    Google Maps API jQuery Pluginを書いてみた
    Dreamweaver拡張機能「閉じタグコメントを挿入」を便利に使う
    New CSS Sticky Footer -CSSでフッターを下に固定する-
    olタグでカッコ数字や丸数字を使う