调整浏览器大小时如何自动居中jQuery UI对话框? [英] How to auto-center jQuery UI dialog when resizing browser?

问题描述

使用jquery UI对话框时，除一件事外，其他所有方法都工作正常. 调整浏览器的大小后，对话框将停留在其初始位置，这可能会很烦人.

When you use jquery UI dialog, all works well, except for one thing. When the browser is resized, the dialog just stays in it's initial position which can be really annoying.

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

You can test it out on: http://jqueryui.com/demos/dialog/

单击模式对话框"示例，然后调整浏览器的大小.

Click on the "modal dialog" example and resize your browser.

我希望能够在调整浏览器大小时让对话框自动居中. 对于我应用程序中的所有对话框，都可以通过高效的方式完成吗?

I'd love to be able to let dialogs auto-center when the browser resizes. Can this be done in an efficient way for all my dialogs in my app?

非常感谢！

推荐答案

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

Setting the position option will force this, so just use the same selector covering all your dialogs where I use #dialog here (if it doesn't find them no action is taken, like all 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});
});

这是同一jQuery UI演示页面，仅添加了上面的代码，我们只是向其中添加了一个处理程序窗口的resize事件，其中带有 .resize() ，因此它会在适当的时间触发重新居中.

Here's that same jQuery UI demo page adding only the code above, we're just adding a handler to the window's resize event with .resize(), so it triggers the re-center at the appropriate time. ​

这篇关于调整浏览器大小时如何自动居中jQuery UI对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！