Question

我正在使用ThickBox在我的页面中打开弹出窗口。在弹出窗口中有一个单击选项卡，我需要更改ThickBox弹出窗口的大小。我怎么能这样做？

提前致谢。

Answer 1

这是他们使用的代码

$("#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'});
    }

因此您可以使用相同的稍作更改（假设您使用现代版本的jQuery ）..

$('#yourbutton').click(function() {
    var TB_WIDTH = 100,
        TB_HEIGHT = 100; // set the new width and height dimensions here..
    $("#TB_window").animate({
        marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
        width: TB_WIDTH + 'px',
        height: TB_HEIGHT + 'px',
        marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
    });
});

http://jsfiddle.net/gaby/rrH8q/

演示

Answer 2

将单击事件处理程序附加到所述选项卡，该选项卡会更改TB_Window尺寸和边距以使其再次居中，例如

$("#tab").click(function() {
    $("#TB_window").css("height", newHeight);
    $("#TB_window").css("width", newWidth);
    $("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
    $("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});

Answer 3

Gaby又名G. Petrioli的回答稍作修正，以便弹出窗口也能正确设置边距：

var TB_WIDTH = 500, TB_HEIGHT = 400;
 // set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
 + 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) + 
'px"'});

Answer 4

我做了这样的事。如果在弹出窗口打开时调整wiewport的大小，则需要重新启动。

＆＃13;

function tb_position() {

if(TB_WIDTH > $(window).width())
{
	$("#TB_window").css({marginLeft: 0, width: '100%', left: 0,  top:0, height:'100%'});
	$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
	$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}

＆＃13;

Answer 5

您必须将其包含在setTimeout中，以便在打开thickbox后执行此操作，而不是在单击按钮时执行此操作。通常，它发生在“点击按钮”和“打开厚箱”之间。

var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
  TB_HEIGHT = 400; // set the new width and height dimensions here..

setTimeout(function() {
  jQuery("#TB_window").css({
    marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
    width: TB_WIDTH + 'px',
    height: TB_HEIGHT + 'px',
    marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
  });
}, 0);

动态更改thickbox弹出窗口大小

5 个答案: