以前、ここでご紹介したエントリー、
「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使って、この様な現象で困った際に是非。。。