jQuery对话框始终居中

如何实现，具有自动宽度和高度的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']);
});

$（“加载…”）对话框({
自动打开：对，
closeOnEscape：没错，
高度：“自动”，
莫代尔：是的，
标题：“关于瑞奇”，
宽度：“自动”
}).bind（'dialogclose'，function（）{
对话框（'destroy'）；
}).load（url，函数（）{
$（此）.dialog（“选项”、“位置”、“中心”、“中心”）；
});
$（窗口）。调整大小（函数（）{
$（“.ui对话框内容”）.dialog（“选项”、“位置”、“中心”、“中心”）；
});

---

谢谢大家!

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

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

这不管用吗？你有我们可以看的“样本”页面吗

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

工作区：

---

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

事实上，我认为

位置：[“中心”，“中心”]

不是最佳解决方案，因为它根据创建时视口的大小为对话框指定了一个明确的

顶部：

和

左侧：

css属性

当我试图在屏幕上垂直放置一个对话中心时，我遇到了同样的问题。以下是我的解决方案：

在我的

.dialog（）

函数的

选项部分，我传递
位置：[null，32]
。
null
设置元素样式的
left:
值，而
32
仅用于将对话框固定在窗口顶部。还要确保设置明确的宽度

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

.myClass{
    margin:0 auto;
}

我的对话框如下所示：

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

希望这对某人有所帮助。
没有一个答案完全符合我的要求。对于那些仍然对此有问题的人，以下是对我有效的方法。这将强制对话框始终显示在屏幕的中心，并在调整浏览器大小时使对话框居中

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

});

该解决方案正在发挥作用：

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

性能相当差，但您可以等待resize end:

我也尝试过，但我无法滚动到比打开对话框的元素位置更低或更高的位置：

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

绑定
窗口上的
调整大小
事件
并根据更新您的
顶部/左侧
位置他如何将您的评论标记为正确答案，我想知道？：-）这不会将长方体沿Y轴放置什么不“工作”？你能更详细地描述这个问题吗？如果我重新调整浏览器窗口的大小，对话框将不会居中。使用
width&height=auto
对话框位于右下角。您看到我的JSFIDLE了吗？代码正在运行。你的问题一定在别处。正在应用什么CSS？谢谢你的代码。遗憾的是，您的代码不能与
.load（url，function（）一起使用
。这对我来说是一个挑战，让此代码与
加载方法一起工作。为什么它不工作？您可以使用.load加载任何内容。除非加载的页面中存在影响对话框位置的CSS，否则内容是无关的。同样，如果它对您有效，是因为您没有加载dyn你的具体条件不同于原来的要求。