如何在调整浏览器大小时自动alignmentjQuery UI对话框？
当你使用jQuery的UI对话框，除了一件事情，一切运作良好。 当浏览器被resize时，对话框只停留在初始位置，这真的很烦人。
你可以testing它： http : //jqueryui.com/demos/dialog/
点击“模式对话框”示例并调整浏览器的大小。
我希望能够让浏览器resize时使对话框自动居中。 这可以在我的应用程序中的所有对话框有效地完成吗？
非常感谢！
设置position选项会强制执行此操作，所以只需使用相同的select器来覆盖我在这里使用#dialog所有对话框（如果没有find它们，就像所有的jQuery一样）：
jQuery UI 1.10之前
$(window).resize(function() { $("#dialog").dialog("option", "position", "center"); });
jQuery UI 1.10或更高版本
$(window).resize(function() { $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window}); });
这里是同样的jQuery UI演示页面 ，只添加上面的代码 ，我们只是用.resize()添加一个处理程序到窗口的resize事件，所以它在适当的时候触发重新中心。
对于Ellesedil的回答，
这个解决scheme并不适合我，所以我做了以下dynamic但缩短的版本：
$( window ).resize(function() { $(".ui-dialog-content:visible").each(function () { $( this ).dialog("option","position",$(this).dialog("option","position")); }); });
虽然Ellesedil +1
编辑：
非常适合单个对话框的短版本：
$(window).resize(function(){ $(".ui-dialog-content").dialog("option","position","center"); });
如果你有一些你不想碰的独特的对话框，那么使用.each（）就没有必要了。
在这里可以find一个更全面的答案，这个答案以更灵活的方式使用Nick的答案。
下面是该线程的相关代码的适配。 这个扩展本质上创build了一个名为autoReposition的新对话框设置，它接受true或false。 编写的代码默认选项为true。 把它放到项目中的.js文件中，以便你的页面可以利用它。
$.ui.dialog.prototype.options.autoReposition = true; $(window).resize(function () { $(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } }); });
当您在页面上创build对话框时，这允许您为此新设置提供“true”或“false”。
$(function() { $('#divModalDialog').dialog({ autoOpen: false, modal: true, draggable: false, resizable: false, width: 435, height: 200, dialogClass: "loadingDialog", autoReposition: true, //This is the new autoReposition setting buttons: { "Ok": function() { $(this).dialog("close"); } } }); });
现在这个对话框总是会重新定位。 AutoReposition（或任何你所说的设置）可以处理没有默认位置的任何对话框，并在窗口resize时自动重新定位它们。 由于您在创build对话框时设置了此对话框，因此无需以某种方式识别对话框，因为重新定位function已内置到对话框本身中。 而最好的部分是，因为这是根据对话设置的，你可以让一些对话重新定位自己，而其他的则保持在原来的位置。
感谢jQuery论坛上的用户scott.gonzalez以获得完整的解决scheme。
另一个可行的CSS选项是这样的。 负边距应该等于您的高度的一半，宽度的一半。 所以在这种情况下，我的对话框宽720px，高400px。 这使它垂直和水平居中。
.ui-dialog { top:50% !important; margin-top:-200px !important; left:50% !important; margin-left:-360px !important }
或者可以使用jQuery的ui 位置 ，
$(window).resize(function () { $(".ui-dialog").position({ my: "center", at: "center", of: window }); });
大家好！
香草JS解决scheme：
(function() { window.addEventListener("resize", resizeThrottler, false); var resizeTimeout; function resizeThrottler() { if (!resizeTimeout) { resizeTimeout = setTimeout(function() { resizeTimeout = null; actualResizeHandler(); }, 66); } } function actualResizeHandler() { $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window }); } }());
