jQuery 对话框始终居中答案

【问题标题】：jQuery dialog always centeredjQuery 对话框始终居中
【发布时间】：2011-11-25 07:17:35
【问题描述】：

如何实现，具有自动宽度和高度的 jQuery 模态对话框始终在浏览器中居中。在调整浏览器窗口大小后也是如此。

以下代码不起作用。我认为问题在于自动宽度和高度。

jQuery - 代码

$("<div class='popupDialog'>Loading...</div>").dialog({
  autoOpen: true,
  closeOnEscape: true,
  height: 'auto',
  modal: true,
  title: 'About Ricky',
  width: 'auto'
}).bind('dialogclose', function() {
  jdialog.dialog('destroy');
}).load(url, function() {
  $(this).dialog("option", "position", ['center', 'center'] );
});

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

谢谢！

【问题讨论】：

在window 上绑定resize 事件并相应地更新您的top/left 定位
我想知道他如何将您的评论标记为正确答案？ :-)

标签： jquery jquery-ui modal-dialog

【解决方案1】：

实际上，我认为position: ["center", "center"] 不是最好的解决方案，因为它根据创建时视口的大小为对话框分配显式top: 和left: css 属性。

我在尝试在屏幕上垂直显示对话中心时遇到了同样的问题。这是我的解决方案：

在我的.dialog() 函数的options 部分中，我传递了position:[null, 32]。 null 设置了left: 值元素的样式，32 只是为了让对话框保持在窗口顶部。还要确保设置明确的宽度。

我还使用dialogClass 选项来分配一个自定义类，它只是一个margin:0 auto; css 属性：

.myClass{
    margin:0 auto;
}

我的对话框看起来像：

  $('div#popup').dialog({
    autoOpen: false,
    height: 710,
    modal: true,
    position: [null, 32],
    dialogClass: "myClass",
    resizable: false,
    show: 'fade',
    width: 1080
  });

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

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

工作 jsFiddle：http://jsfiddle.net/vNB8M/

对话框以自动宽度和高度居中，并在窗口调整大小后继续居中。

【讨论】：

什么不起作用？你能更详细地描述一下这个问题吗？
如果我重新调整浏览器窗口的大小，对话框将不会居中。使用width & height = auto，对话框位于右下角。
你看到我的 jsFiddle 了吗？代码正在运行。你的问题一定在别处。正在应用什么 CSS？
感谢您的代码。遗憾的是，您的代码不适用于.load(url, function()。让这段代码与load 方法一起工作对我来说是一个挑战。
为什么不起作用？您可以使用 .load 加载任何内容。内容无关紧要，除非您正在加载的页面中有一些 CSS 会影响对话框的位置。

【解决方案3】：

没有一个答案完全符合我的要求。对于那些仍然有这个问题的人，这对我有用。这将强制对话框始终出现在屏幕的中心，并且在调整浏览器大小时它将使对话框居中。

$( "#ShowDialogButton" ).click(function(){
    $( "#MyDialog" ).dialog({
       show: 'fade'
     }).dialog( "option", "position", { my: "center", at: "center", of: window } );

    $(window).resize(function() {
        $( "#MyDialog" ).dialog( "option", "position", { my: "center", at: "center", of: window } );
    });

});

【讨论】：

再说一次，如果它对您有用，是因为您没有将动态内容加载到其中。您的具体条件与原件的要求不同。

【解决方案4】：

对话框周围的模态窗口应该允许您将对话框放置在以下 css 的中心：

margin-left:auto;margin-right:auto;

这不起作用吗？您有我们可以查看的“示例”页面吗？

【讨论】：

这不会沿 Y 轴定位框

【解决方案5】：

此解决方案有效：

$(window).resize(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});

性能很差，但可以等待resize结束：jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?。

我也试过这个，但我不能滚动低于或高于打开对话框的元素位置：

$(window).scroll(function () 
{
    $("#myDialog").dialog("close");
    $("#myDialog").dialog("open");
});

【讨论】：