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'});
	}
}

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

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

ご参考までに。。。