投稿

jQuery：Thickbox

jquery

長年の懸案だった、Thickboxが IEでうまく動かない件がやっと解決しました。それも自力で。エライね＞自分。
懸案事項は次の２点。

  • 縦に長い画面で、下にスクロールしたところでウィンドウを出すと、画面中央に出ず、上の方に隠れてしまう。（画面TOPからの固定位置で表示される）
  • このような場合、画面と一緒にスクロールしてしまう

本来は、どのような状況でもウィンドウは画面中央にきて、スクロールは背面の画面がスクロールするだけでウィンドウの位置は変わらないというのが正しい挙動です。もちろん、オフィシャルサイトのデモはそういう動きをしています。
それがどうしておかしくなるかというと、DOCTYPEの「標準モード」と「互換モード」の違いでした。

上が互換モードで、下が標準モードです。
Thickboxを互換モードで動かそうとすると、IEに限って、上のような現象に遭遇します。Firefoxとか Chromeは大丈夫なのが現象をわかりづらくしてますね。

/作成者:

jQuery：Thickbox

jquery

いつもお世話になっている Thickboxですが、画像の拡大表示くらいしか使っていなかったんですけど、よんどころない事情でインライン表示を使うことになって、いまさらながらのポイントもわかり、きっとあとで見ると思うので、メモメモ。
　

  1. 別ファイルをモーダルで表示するとき、どうやって閉じればいいんだ？
    こう「self.parent.tb_remove();」します。具体的には、こんな感じ。
    ＜a href=”javascript:self.parent.tb_remove();”＞Close Window＜/a＞
  2. Thickboxをドラッグ可能にする
    これはまだ試してないけど、動かせなくて不便だなと常々思っていたので、そのうちやってみます。
    jQuery UI Draggable を使えば簡単よ、ということらしい。
  3. Thickbox呼び出し方のまとめ 
    <a href="#TB_inline?height=xxx&amp;width=xxx&amp;inlineId=divID" class="thickbox">EXAMPLE</a>
<a href="#TB_inline?height=xxx&amp;width=xxx&amp;inlineId=divID&amp;modal=true" class="thickbox">EXAMPLE</a>
<a href="http://url.com?keepThis=true&amp;TB_iframe=true&amp;height=xxx&amp;width=xxx" title="xxx" class="thickbox">EXAMPLE</a>
<a href="http://url.com?placeValuesBeforeTB_=savedValues&amp;TB_iframe=true&amp;height=xxx&amp;width=xxx&amp;modal=true" title="xxx" class="thickbox">EXAMPLE</a>

    keepThis や placeValuesBeforeTB_ はなくてもへっちゃらみたいです。

/作成者: