いまだに使われているのをよく目にするjQueryモーダルウィンドウプラグイン「Thickbox」。

つい先日、このThickboxを使ってモーダルウィンドウをiframeを使って表示した際、
iframe内で画面遷移をした時に、遷移後のページの画面サイズに合わせて
モーダルウィンドウのサイズをリサイズしたいという要望があり、
「thickbox.js」プラグインファイルを変更することで簡単に実装することができたので
その方法をここでもメモとして紹介してみたいと思います。

Thickbox iframe表示時の画面遷移でモーダルウィンドウをリサイズする方法

まずは「thickbox.js」が通常(デフォルト)の状態だとどういう現象になるか、
下記のリンクをクリック後、表示される「≫ThickboxOpen」をクリックして
Thickboxモーダルウィンドウを開いて、その中のリンクをクリックしてみてください。

「thickbox.js」デフォルト状態

モーダルウィンドウ内で画面遷移をすると
枠の大きさは変わらず、スクロールバーが出てきます。

これを画面遷移すると、遷移後のページのサイズ(高さ)に合わせて
モーダルウィンドウ部分をリサイズさせるようにします。

まずは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.js」iframeリサイズ処理実装後

モーダルウィンドウ内で画面遷移すると
遷移後の画面サイズに合わせてモーダルウィンドウがリサイズします。
※親ページからのThickboxサイズの指定は「height」の指定を「0」にしておくと
 アニメーションがきれいに動きます。

取得する高さの値はIDではなくbodyタグを対象にすることも可能ですが、
IE6のみ正しい値を取得できず、別の処理を加えないといけなくなります。
(IE6が対象でない場合は高さの取得はbodyタグでも可能になります。)

サンプルではモーダルウィンドウの高さのみ変更していますが
幅の変更も必要な場合は、同じスクリプトでwidthの値が変更されるように追記することで
実装が可能になります。

Thickboxを使ってiframeモーダルウィンドウのサイズ調整が必要になった際にぜひ。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

Thickboxでのiframe表示時の画面遷移でモーダルウィンドウをリサイズする方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR