jquery - 调整浏览器大小时如何自动居中 jQuery UI 对话框？

Question

当您使用 jquery UI 对话框时，除一件事外，一切正常。调整浏览器大小时，对话框会停留在初始位置，这真的很烦人。

您可以在以下方面进行测试: http://jqueryui.com/demos/dialog/

单击“模态对话框”示例并调整浏览器大小。

我希望能够在浏览器调整大小时让对话框自动居中。对于我的应用程序中的所有对话框，这能否以高效的方式完成？

Answer 1

设置position option将强制执行此操作，因此只需使用覆盖所有对话框的相同选择器，我在这里使用 #dialog(如果没有找到它们，则不采取任何操作，就像所有 jQuery 一样):

1.10 之前的 jQuery UI

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

Here's that same jQuery UI demo page adding only the code above ，我们只是用 .resize() 向窗口的 resize 事件添加一个处理程序。 ，因此它会在适当的时间触发重新居中。