动态更改Thickbox弹出窗口大小

Question

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

提前感谢您。

- MUS

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/

。

- Gabriele Petrioli

---

@Umar，你能发布一个实时版本吗？（你是否使用了这个thickbox：http://jquery.com/demo/thickbox/？）另外，我在那里有一个语法错误...请使用更新后的代码再试一次... - Gabriele Petrioli

从当前版本的WordPress（4.9.6）开始，我无法像您的代码中那样覆盖thickbox的任何内容。我必须使用setTimeout()来延迟它，然后它才能正常工作。您有什么建议吗？ - vee

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

- Majid Sayyed

---

你的例子中$vitjs是什么？ - teamcrisis

它被用来代替 $ 以避免冲突...但它与上面的代码没有任何关系... 所以你可以直接使用 $ 来代替 $vitjs... - Majid Sayyed

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

- nwellcome

---

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

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

- tinny77

Answer 5

你必须将这个操作放在setTimeout中，以便在打开thickbox之后执行，而不是在按钮点击时执行。通常情况下，它发生在“点击按钮”和“打开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);

- infusedmj