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

How to auto-center jQuery UI dialog when resizing browser?

提问by Jorre

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.

当您使用 jquery UI 对话框时，一切正常，除了一件事。当浏览器调整大小时，对话框只是停留在它的初始位置，这真的很烦人。

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

您可以在以下位置进行测试：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?

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

Thanks a lot!

非常感谢！

回答by Nick Craver

Setting the positionoptionwill force this, so just use the same selector covering all your dialogs where I use #dialoghere (if it doesn't find them no action is taken, like all jQuery):

设置该position选项将强制执行此操作，因此只需使用相同的选择器覆盖我#dialog在这里使用的所有对话框（如果没有找到它们，则不会采取任何操作，就像所有 jQuery 一样）：

jQuery UI before 1.10

1.10 之前的 jQuery UI

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

jQuery UI 1.10 or higher

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, we're just adding a handler to the window's resizeevent with .resize(), so it triggers the re-center at the appropriate time. ?

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

回答by Pierre

Alternatively to Ellesedil's answer,

替代Ellesedil的回答，

That solution did not work for me straight away, So I did the following which is also dynamical but shortened version:

该解决方案并没有立即对我有用，所以我做了以下也是动态但缩短的版本：

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

+1 for Ellesedil though

+1 对于 Ellesedil

EDIT:

编辑：

Much shorter version which works great for single dialogs:

更短的版本，适用于单个对话框：

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

It is not necessary for .each() to be used perhaps if you have some unique dialogs which you dont want to touch.

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

回答by Ellesedil

A more comprehensive answer, which uses Nick's answer in a more flexible way can be found here.

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

An adaption of the code of relevance from that thread is below. This extension essentially creates a new dialog setting called autoReposition which accepts a true or false. The code as written defaults the option to true. Put this into a .js file in your project so that your pages can leverage it.

下面是对该线程相关代码的改编。这个扩展本质上创建了一个名为 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'));
            }
        });
    });

This allows you to supply a "true" or "false" for this new setting when you create your dialog on your page.

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

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

Now this dialog will always reposition itself. AutoReposition (or whatever you call the setting) can handle any dialogs that do not have a default position and automatically reposition them when the window resizes. Since you're setting this when you create the dialog, you don't need to identify a dialog somehow because the repositioning functionality becomes built into the dialog itself. And the best part is that since this is set per dialog, you can have some dialogs reposition themselves and others remain where they are.

现在此对话框将始终重新定位自身。AutoReposition（或任何您调用的设置）可以处理任何没有默认位置的对话框，并在窗口调整大小时自动重新定位它们。由于您在创建对话框时设置了此项，因此您不需要以某种方式识别对话框，因为重新定位功能已内置到对话框本身中。最好的部分是，由于这是每个对话框设置的，您可以让一些对话框重新定位，而其他对话框保持原位。

Credit to user scott.gonzalez on the jQuery forums for the complete solution.

感谢 jQuery 论坛上的用户 scott.gonzalez 提供了完整的解决方案。

回答by Kirk Ross

Another CSS-only option which works is this. The negative margins should equal half your height and half your width. So in this case, my dialog is 720px wide by 400px tall. This centers it vertically and horizontally.

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

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

回答by AkilaI

Alternatively jQuery ui positioncan be used,

或者可以使用jQuery ui位置，

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

回答by Alexandr Kazakov

Hello everyone!

大家好！

Vanilla JS solution:

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