如何在调整浏览器大小时自动居中jQuery UI对话框？
当您使用jquery UI对话框时，除了一件事之外，所有的都工作得很好。当浏览器调整大小时，对话框只停留在初始位置，这真的很烦人。
你可以在http://jqueryui.com/demos/dialog/上测试它。
单击“模式对话框”示例并调整浏览器的大小。
我希望能够在浏览器调整大小时让对话框自动居中。我的应用程序中的所有对话框都可以以一种有效的方式完成吗？
回答 4
Stack Overflow用户
发布于 2013-06-17 17:57:28
与Ellesedil的答案不同，
这个解决方案对我来说不是直接有效的，所以我做了以下也是动态的但简短的版本：
$( 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()。
Stack Overflow用户
发布于 2013-01-03 04:46:58
更全面的答案可以在here找到，它以更灵活的方式使用了尼克的答案。
下面是来自该线程的相关代码的改编。这个扩展实际上创建了一个名为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'));
}
});
});这允许您在页面上创建对话框时为此新设置提供"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 (或您对该设置的任何称呼)可以处理任何没有默认位置的对话框，并在调整窗口大小时自动重新定位它们。因为您是在创建对话框时设置的，所以您不需要以某种方式标识一个对话框，因为重新定位功能已内置到对话框本身中。最好的部分是，因为这是为每个对话框设置的，所以您可以让一些对话框重新定位，而另一些对话框则保持不变。
向jQuery论坛上的用户scott.gonzalez致谢，以获得完整的解决方案。
Stack Overflow用户
发布于 2016-10-18 19:00:40
可替换地，可以使用jQuery ui position，
$(window).resize(function ()
{
$(".ui-dialog").position({
my: "center", at: "center", of: window
});
});https://stackoverflow.com/questions/3060146
复制相似问题
腾讯云开发者
