动态更改厚框弹出窗口大小答案

【问题标题】：Change thickbox popup size dynamically动态更改厚框弹出窗口大小
【发布时间】：2011-07-14 20:09:51
【问题描述】：

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

提前致谢。

【问题讨论】：

【解决方案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/的演示

【讨论】：

@Umar 你能发布一个现场版本吗？（你在用这个thickbox吗：jquery.com/demo/thickbox？），另外，我在那里有一个语法错误..用更新的代码再试一次......
从当前版本的 WordPress (4.9.6) 开始，我无法像您的代码那样覆盖任何厚盒。我必须使用setTimeout() 让它延迟然后才能工作。你有什么建议吗？

【解决方案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);
});

【讨论】：

我没有像@Gaby 那样查看他们调整大小的代码，他的更好，尽管我的会做一些事情......

【解决方案3】：

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

【讨论】：

你的例子中的 $vitjs 是什么？
它是用来代替$来避免冲突的......但是它与上面的代码无关..所以你可以简单地用$代替$vitjs.....

【解决方案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'});
}

【讨论】：

【解决方案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);

【讨论】：