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

+1 Ellesedil虽然

编辑：

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

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

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

Answer 3

可以找到更全面的答案，以更灵活的方式使用尼克的答案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表示完整的解决方案。

Answer 4

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

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

Answer 5

或者可以使用jQuery ui position，

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

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

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

6 个答案: