调整浏览器大小时如何自动居中 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 事件添加一个处理程序，因此它会在适当的时间触发重新居中。 ​

Answer 2

除了 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()。

Answer 3

可以找到更全面的答案，它以更灵活的方式使用尼克的答案here。

来自该线程的相关代码的改编如下。这个扩展本质上创建了一个名为 autoReposition 的新对话框设置，它接受真或假。编写的代码默认选项为 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'));
            }
        });
    });

这允许您在页面上创建对话框时为此新设置提供“真”或“假”。

$(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 提供完整的解决方案。

Answer 4

也可以使用jQuery ui position，

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Answer 5

另一个有效的纯 CSS 选项是这个。负边距应该等于一半的高度和一半的宽度。所以在这种情况下，我的对话框是 720px 宽 x 400px 高。这会将其垂直和水平居中。

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Answer 6

大家好！

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