jQuery对话框始终居中
如何实现，具有自动宽度和高度的jQuery模式对话框始终在浏览器中居中。 调整浏览器窗口大小后。
以下代码不起作用。 我认为问题是自动宽度和高度。
jQuery – 代码
$("Loading...").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", "position", ['center', 'center']); }); 谢谢！
实际上，我认为position: ["center", "center"]不是最好的解决方案，因为它根据创建时视口的大小为对话框指定了一个explict top:和left: css属性。
当我试图在屏幕上垂直放置一个对话框中心时，我遇到了同样的问题。 这是我的解决方案：
在我的.dialog()函数的options部分中，我传递position:[null, 32] 。 null设置left: value元素的样式， 32仅用于将对话框固定到窗口的顶部。 另外一定要设置明确的宽度。
我还使用dialogClass选项来分配一个自定义类，它只是一个margin:0 auto; css属性：
.myClass{ margin:0 auto; }
我的对话框看起来像：
$('div#popup').dialog({ autoOpen: false, height: 710, modal: true, position: [null, 32], dialogClass: "myClass", resizable: false, show: 'fade', width: 1080 });
希望这有助于某人。
$(window).resize(function() { $("#dialog").dialog("option", "position", "center"); });
工作jsFiddle： http ： //jsfiddle.net/vNB8M/
对话框以自动宽度和高度为中心，并在窗口resize后继续居中。
没有一个答案完全符合我的要求。 对于那些仍然有问题的人来说，这对我有用。 这将强制对话框始终显示在屏幕的中央，并且在浏览器resize时它将使对话框居中。
$( "#ShowDialogButton" ).click(function(){ $( "#MyDialog" ).dialog({ show: 'fade' }).dialog( "option", "position", { my: "center", at: "center", of: window } ); $(window).resize(function() { $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } ); }); });
对话框周围的模态窗口应该允许您将对话框放置在以下css的中心：
margin-left:auto;margin-right:auto;
这不起作用吗？ 你有一个我们可以看到的“样本”页面吗？
此解决方案正在运行：
$(window).resize(function () { $("#myDialog").dialog("close"); $("#myDialog").dialog("open"); });
性能非常糟糕，但你可以等待resize结束： jQuery – 如何等待’resize’事件的’end’然后再执行一个动作？ 。
我也尝试了这个，但我不能滚动低于或高于打开对话框的元素的位置：
$(window).scroll(function () { $("#myDialog").dialog("close"); $("#myDialog").dialog("open"); });