动态更改厚盒弹出窗口大小

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

对 Gaby aka 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 3

将单击事件处理程序附加到所述选项卡，以更改 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 4

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

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

Answer 5

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

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