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

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

您可以在以下网址进行测试：http : //jqueryui.com/demos/dialog/

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

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

非常感谢！

设置该position选项将强制执行此操作，因此只需使用相同的选择器覆盖您在#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});
});

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

除了Ellesedil的答案，

该解决方案无法立即为我工作，因此我做了以下一些动态的但简短的版本：

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

埃勒塞迪尔+1

编辑：

短得多的版本非常适合单个对话框：

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

如果您有一些不想触摸的独特对话框，则不必使用.each（）。

在此处可以找到更全面的答案，该答案以更灵活的方式使用尼克的答案。

来自该线程的相关代码的改编如下。此扩展实质上创建了一个名为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。

另一个仅CSS选项有效。负边距应等于您的高度的一半和宽度的一半。因此，在这种情况下，我的对话框为720px宽x 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
    });
});

大家好！

Vanilla JS解决方案：

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