我怎样才能实现一个带有自动宽度和放大器的jQuery模式对话框.高度总是在浏览器中居中.调整浏览器窗口大小后.
jQuery – 代码
$("<div class='popupDialog'>Loading...</div>").dialog({
autoOpen: true,cloSEOnEscape: true,height: 'auto',modal: true,title: 'About Ricky',width: 'auto'
}).bind('dialogclose',function() {
jdialog.dialog('destroy');
}).load(url,function() {
$(this).dialog("option","position",['center','center'] );
});
$(window).resize(function() {
$(".ui-dialog-content").dialog("option",'center']);
});
谢谢！
解决方法
实际上,我认为位置：[“center”,“center”]不是最好的解决方案,因为它根据创建时视口的大小为对话框指定了一个explict top：和left：css属性.
当我试图在屏幕上垂直放置一个对话框中心时,我遇到了同样的问题.这是我的解决方案：
在我的.dialog()函数的选项部分中,我传递位置：[null,32]. null设置左：value元素的样式,32仅用于将对话框固定到窗口的顶部.另外一定要设置明确的宽度.
我还使用dialogClass选项来分配一个自定义类,它只是一个边距：0 auto; css属性：
.myClass{
margin:0 auto;
}
我的对话框看起来像：
$('div#popup').dialog({
autoOpen: false,height: 710,position: [null,32],dialogClass: "myClass",resizable: false,show: 'fade',width: 1080
});
希望这有助于某人.
