调整浏览器大小时如何自动居中 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):

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()，因此它会在适当的时间触发重新居中.

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屋！