以前、ここでご紹介したエントリー、
ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法」。
前回のパターンではIE6に対しては、このThickBoxの不具合(?)処理の対応をしていなかったのですが、
どうやら、昨日自分のTwitterをフォローしてくれた方が、この方法を使ってくれていたようなので
IE6対応版も作ってみました。(←もちろん現在の業務上でもこの先必要になるもの…)

jQueryモーダルウィンドウプラグイン「ThickBox」で
ブラウザ枠を縮めてもモーダルウィンドウ枠が画面から見切れない方法【IE6対応版】。
(詳しい事象内容は前回記事から。。。)

ThickBoxのデフォルトファイルではIE6に対して、モーダルウィンドウ枠「#TB_window」の位置指定は、
CSS「thickbox.css」ファイル内で、IE独自の指定「expression」を使っているのですが、
JS(jQuery)で制御する際、これが思いのほか厄介だったり。。。

そもそもThickBoxは「#TB_window」位置指定のCSSやSCRIPTのベースが、
IE6と他のブラウザとは方法が違うので、「thickbox.js」内でも
IE6とそれ以外で指定方法をif文使って切り分ける構成に。

改修方法は前回同様に「thickbox.js」の中にある「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'});
	}
	if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
		var TB_height = parseInt($("#TB_window").height());
		var WD_height = $(window).height();
		var scrTop = $(window).scrollTop();
		var IE6scrTop = 0;

		if(TB_height > WD_height) {
			$('#TB_window').css({top:(scrTop),marginTop:'0'});
		} else {
			$('#TB_window').css({top:'',marginTop: ((IE6scrTop) - parseInt(((TB_height / 2) - scrTop),10)) + 'px'});
		};
	}else{//all others
		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'});
		};
	}
}

if 文の記述構成は「thickbox.js」の中で、IE6とその他ブラウザで切り分けている箇所が
あちらこちらにあるので同じ記載方法で。

IE6の処理は「expression」で出している値の計算を何とかJS側で同じ値にしたもの。
それとIE6の場合は「position」の値は変更しないように。
その他ブラウザへの処理は前回と一緒です。

上記SCRIPTと併せて、ThickBoxウィンドウを開いた後に、
ブラウザ枠をリサイズした時の制御として「thickbox.js」の一番下に下記を追記。

$(function(){
	$(window).bind('resize',function(){
		if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
			var TB_height = parseInt($("#TB_window").height());
			var WD_height = $(window).height();
			var scrTop = $(window).scrollTop();
			var IE6scrTop = 0;

			if(TB_height > WD_height) {
				$('#TB_window').css({top:(scrTop),marginTop:'0'});
			} else {
				$('#TB_window').css({top:'',marginTop: ((IE6scrTop) - parseInt(((TB_height / 2) - scrTop),10)) + 'px'});
			};
		}else{//all others
			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'});
			};
		}
	});
});

ブラウザがリサイズする度に、サイズ等の情報を取得し直して、
「#TB_window」の表示位置を制御します。

これらを実際に動かしてみると以下のような感じになります。
ThickBox Custom【PlusIE6】
※サンプル画面は前回とちょっと違います。

サムネイルをクリックしてThickBoxモーダルウィンドウが表示された後、ブラウザ枠を縮めていくと、
ThickBoxモーダルウィンドウより、ブラウザ枠が小さくなった時点で、モーダルウィンドウは
ブラウザ上部に固定されます。
再度、ブラウザを伸ばせば中央寄せに。

確認ブラウザは
Win:IE6、IE7、IE8、Firefox3.6、Safari5.0、Chrome5.0

ThickBox使って、この様な現象で困った際に是非。。。

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

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

Related Posts

Comments (7)

  • Tweets that mention ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】 - BlackFlag – Web Development Technical -- Topsy.com | 2010.10.20 23:21

    [...] This post was mentioned on Twitter by 川崎浩司, YATSUGI-G. YATSUGI-G said: ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】(゚Д゚)ゴルァ! http://black-flag.net/?p=1639 [...]

  • tsutchan | 2012.03.28 16:05

    IE6の死亡フラグがたった本日要望がありまして、大変助かりました!

  • BlackFlag | 2012.03.28 20:53

    >tsutchanさん

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

    このスクリプト記事がお役に立ったようで嬉しく思います!

    今日からやっとIE6の終わりが見え始めましたが
    もうしばらくは付き合いが必要そうですね。。。

  • piyosato | 2013.01.21 16:53

    前から困ってたので非常に助かりました!!

  • BlackFlag | 2013.01.27 1:53

    >piyosatoさん

    コメントありがとうございました。
    このスクリプトがお役に立ったようで嬉しく思っております。

  • ise | 2013.10.02 21:48

    サイトを作り直すうえでthickboxを選んだのですがこのスクロール問題だけが悩みで…
    しかし、おかげさまですっきり解決しました!本当にありがとうございます。
    感謝感激です。

  • BlackFlag | 2013.10.03 0:37

    >iseさん
    コメントありがとうございます。

    このスクリプトが問題解決のお役に立ったようで
    とても嬉しく思っております。

    他にもいろいろと掲載しておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

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

ThickBoxでモーダルウィンドウ枠をブラウザ枠を縮めても見切れないようにする方法。【IE6対応版】

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