javascript 动态更改厚框弹出大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6699344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change thickbox popup size dynamically
提问by MUS
I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
我正在使用 ThickBox 在我的页面中打开弹出窗口。在弹出窗口中有一个单击选项卡，我需要更改ThickBox 弹出窗口的大小。我怎样才能做到这一点 ？
Thanks in advance.
提前致谢。
采纳答案by Gabriele Petrioli
This is the code they use
这是他们使用的代码
$("#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'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
所以你可以使用相同的稍作改动（假设你使用现代版本的 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'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/
回答by Majid Sayyed
A little correction in Gaby aka G. Petrioli's answerso that popup should set the margins also correctly :
对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"'});
回答by tinny77
I did something like this. This needs to be re-launched if the wiewport is resized while the popup is open.
我做了这样的事情。如果在弹出窗口打开时调整了 wiewport 的大小，则需要重新启动。
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'});
}回答by infusedmj
You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
您必须将其包含在 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);回答by nwellcome
Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
将单击事件处理程序附加到所述选项卡，该选项卡会更改 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);
});
