thickboxでHTMLをiframeつかって表示させるときに、サイズを決め打ちにしなければならないみたいです。
デフォルトだとどうやら、横が「630px」、縦が「600px」のようです。
固定にすると、ネットブックとか小さい画面ではみれなかったりします。
リンクのパラメータで縦横のサイズを指定できますが、小さい画面のことを考えて作ると大きい画面で表示したときに、変になってしまいます。
%で指定すればいいんだろうけど、うまくできなかったので、自分で修正してみました。
今回は、ブラウザのウィンドウサイズの80%で表示させるように修正しています。
まず、thikcbox.jsの一番したに以下のコードを加えます
1
2
3
4
5
6
7
8
9
|
function custom_default_width() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return width * 0.8;
}
function custom_default_height() {
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
return height * 0.8;
}
|
次に、thickbox.jsの187行目にある以下のコードを書き換えます。
1
2
|
TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height']*1) + 40 || 600; //defaults to 440 if no paramaters were added to URL
|
上記のコードを以下のようにしてください。
1
2
|
TB_WIDTH = (params['width']*1) + 30 || custom_default_width(); //defaults to 630 if no paramaters were added to URL
TB_HEIGHT = (params['height']*1) + 40 || custom_default_height(); //defaults to 440 if no paramaters were added to URL
|
これで、画面サイズの80%でThickBoxを表示できるようになります。
参考サイト
http://www.kantenna.com/pg/2007/06/post_23.php