いまだに使われているのをよく目にするjQueryモーダルウィンドウプラグイン「Thickbox」。
つい先日、このThickboxを使ってモーダルウィンドウをiframeを使って表示した際、
iframe内で画面遷移をした時に、遷移後のページの画面サイズに合わせて
モーダルウィンドウのサイズをリサイズしたいという要望があり、
「thickbox.js」プラグインファイルを変更することで簡単に実装することができたので
その方法をここでもメモとして紹介してみたいと思います。
Thickbox iframe表示時の画面遷移でモーダルウィンドウをリサイズする方法
まずは「thickbox.js」が通常（デフォルト）の状態だとどういう現象になるか、
下記のリンクをクリック後、表示される「≫ThickboxOpen」をクリックして
Thickboxモーダルウィンドウを開いて、その中のリンクをクリックしてみてください。
モーダルウィンドウ内で画面遷移をすると
枠の大きさは変わらず、スクロールバーが出てきます。
これを画面遷移すると、遷移後のページのサイズ（高さ）に合わせて
モーダルウィンドウ部分をリサイズさせるようにします。
まずはThickboxモーダルウィンドウのiframe内で表示するHTMLファイル側で
コンテンツ要素全体を任意のIDで囲います。
※サンプルではID名を「#modal_wrap」とします。
このIDにてページ全体の高さを計算することになります。
そして、「thickbox.js」にスクリプトを追加します。
まずは、「thickbox.js」の200行目辺りで、iframeのソースを生成していますが
そのHTMLが生成された後にfunction「iframeResize();」が実行されるように追記します。
if(params['modal'] != "true"){//iframe no modal
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
iframeResize();
}else{//iframe modal
そして「thickbox.js」の最下部に下記のスクリプトを追記します。
function iframeResize(){
$('iframe').load(function(){
var ifHeight = parseInt($('iframe').contents().find('#modal_wrap').height());
$('#TB_iframeContent').stop().animate({height:(ifHeight)},500);
var wdPosition = (ifHeight)/2;
$('#TB_window').stop().animate({marginTop:-(wdPosition)},500);
});
}
iframe内のコンテンツ要素「#modal_wrap」の高さの値をみて
iframeの「height」の値に埋め込んだ後に、
モーダルウィンドウの位置を再調整しています。
これを実行させたサンプルは以下のリンクから。
モーダルウィンドウ内で画面遷移すると
遷移後の画面サイズに合わせてモーダルウィンドウがリサイズします。
※親ページからのThickboxサイズの指定は「height」の指定を「0」にしておくと
アニメーションがきれいに動きます。
取得する高さの値はIDではなくbodyタグを対象にすることも可能ですが、
IE6のみ正しい値を取得できず、別の処理を加えないといけなくなります。
（IE6が対象でない場合は高さの取得はbodyタグでも可能になります。）
サンプルではモーダルウィンドウの高さのみ変更していますが
幅の変更も必要な場合は、同じスクリプトでwidthの値が変更されるように追記することで
実装が可能になります。
Thickboxを使ってiframeモーダルウィンドウのサイズ調整が必要になった際にぜひ。