jQueryモーダルウィンドウプラグインで有名どころの「ThickBox」。
使い勝手がとても良く、さまざまな応用が効くプラグインで結構使う頻度が高かったりします。

◆ThickBox
jQuery ThickBox 3.1

ですが、このプラグインでは残念な点としてThickBoxとして開いたウィンドウよりブラウザ枠を縮めると
ThickBoxウィンドウの上下がブラウザから見切れてしまう現象に陥ってしまいます。

そんなThickBoxの使いづらい部分を何とか制御してみようと試した結果を
ちょっと紹介してみます。(始めに言っておきますがIE6非対応です。。。)

まずはThickBoxプラグインをそのまま使用した場合のサンプル。
ThickBox Default

画面に表示されるサムネイルをクリックすることで、ThickBoxウィンドウが表示されます。
表示されるThickBoxウィンドウ枠よりブラウザの枠を縮めてみると、
ThickBoxで表示されるウィンドウは「position:fixed」によって常に画面の中央に配置しようとするので
ブラウザ枠がウィンドウ枠より小さくなった場合にはウィンドウの上下が見えなくなってしまいます。
スクロールしても上下を見ることは出来ません。

これを調整したパターンはこちら。
ThickBox Custom

ブラウザ枠がウィンドウ枠より小さくなった場合には
ThickBoxウィンドウエリア(#TB_window)の「position」を「absolute」に変更し、
「margin-top」や「top」の値を調整し、その場に固定します。

このパターンだと何とか画面から見切れた部分は、
ブラウザのスクロールをすることで表示が可能となります。

実装方法は「thickbox.js」に下記SCRIRTを追記します。

まず、もともと記述されている「function tb_position()」を見ると

function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
	}
}
[/javascript]

これに以下のように追記します。

[javascript]
function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
	if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
		$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
	}
	var TB_height = parseInt($("#TB_window").height());
	var WD_height = $(window).height();
	var scrTop = $(window).scrollTop();

	if(TB_height > WD_height) {
		$('#TB_window').css({top:(scrTop),marginTop:'0',position:'absolute'});
	} else {
		$('#TB_window').css({top:'',marginTop: '-' + parseInt((TB_height / 2),10) + 'px',position:'fixed'});
	};
}

ここではThickBoxウィンドウが開かれる際にウィンドウの位置を制御しているので、
その際にブラウザの高さを取得してウィンドウの位置を固定にするか、
フリーにするか判別させます。

そして、ThickBoxウィンドウを開いた後に、
ブラウザ枠を縮めた時の制御として「thickbox.js」の一番下に下記を追記します。

$(function(){
	$(window).bind('resize',function(){
		var TB_height = parseInt($("#TB_window").height());
		var WD_height = $(window).height();
		var scrTop = $(window).scrollTop();

		if(TB_height > WD_height) {
			$('#TB_window').css({top:(scrTop),marginTop:'0',position:'absolute'});
		} else {
			$('#TB_window').css({top:'',marginTop: '-' + parseInt((TB_height / 2),10) + 'px',position:'fixed'});
		};
		return false;
	});
});

ブラウザをリサイズする度に、サイズを取得し、
ブラウザの高さがThickBoxウィンドウエリア(#TB_window)より小さくなった際に
位置の固定をCSSに加えます。
ブラウザサイズがウィンドウエリア(#TB_window)より大きくなれば、また元に戻す処理も。

追記はこれだけです。
いちよWin:IE7、IE8、Firefox3.6、Safari5.0、Chrome5.0で確認する限りは正常に動作しています。

まだまだIE6に対応していなかったり、
いまいち納得いっていないところがあるので
もうちょっと使い勝手よくカスタマイズできるように引き続きやってみます。

ご参考までに。。。

SHARE

Comments (8)

  • ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】 - BlackFlag – Web Development Technical | 2010.10.19 18:17

    […] […]

  • WEBデザイナー | 2012.06.28 9:50

    非常に助かりました。
    神です!!

  • BlackFlag | 2012.06.29 0:56

    >WEBデザイナーさん

    コメントありがとうございます!
    このThickBox改修スクリプトがお役に立ったようでよかったです。

    IE6に対応させたパターンもありますので参考にしてみてください。
    https://black-flag.net/jquery/20101019-1639.html

    よろしくお願いします。

  • WEBデザイナー | 2012.07.11 17:37

    おおぉおお。IE6にも対応していたのですね。
    本当に助かりました。

    ありがとうございます!!

  • BlackFlag | 2012.07.14 2:08

    >WEBデザイナーさん

    ありがとうございます!
    IE6対応版も使ってみてください!

    よろしくお願いします。

  • WEBデザイナー | 2012.07.20 9:32

    今回のスクロールの件は、本当に助かりました。
    ありがとうございます。

    ついにサイトが完成をしようとしているのですが、
    1箇所だけつまづいているところがあり、
    ちょっとお分かりになれば教えていただきたいと思い、書きこみました。

    なんと、ローディングアニメーション(loadingAnimation.gif)が表示されないのです。
    当初のjsとcssの配置場所から移動させているので、それが原因かと思い、
    thickbox.jsの8行目あたりのloadingAnimation.gifのパスを相対で設置している場所にしてもダメで、
    loadingAnimation.gifをサーバーにあげて絶対パスにしても表示されません、、、。

    IEで見ると「×」印になってしまうのはかっこ悪いので、
    いっそのことloadingAnimation.gifを表示しなくていいとは思ってます。

    もしよかったらloadingAnimation.gifの表示をなくしてしまう方法を教えていたただけないでしょうか?
    本当に恐縮ですが、何卒よろしくお願い致します。。。

  • WEBデザイナー | 2012.07.20 10:06

    さきほどの質問なんですが、jsを勘でいじっていたら、解決しました。
    55行目あたりにimgLoaderのパスの記述があり、そこをいじったらあっさりと…。
    ご迷惑おかけしました。
    良いサイトができそうです。

  • BlackFlag | 2012.07.21 0:50

    >WEBデザイナーさん

    コメントありがとうございます。

    ローディングアニメーション(loadingAnimation.gif)を
    絶対パスにしても表示されないのは不思議な現象ですね。。

    けれど無事に表示削除の動作が実装できた様で良かったです。

    また何かありましたらよろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して