jQuery 对话框始终居中

Question

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

谢谢！

Answer 1

实际上，我认为 position: ["center", "center"] 不是最好的解决方案，因为它分配了显式的 top: 和 left:< /code> 根据创建时视口的大小向对话框添加 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
  });

希望这对某人有帮助。

Answer 2

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

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

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

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

});

Answer 4

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

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

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

Answer 5

此解决方案有效：

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

性能相当糟糕，但您可以等待调整大小结束： jQuery - 如何等待“resize”事件的“结束”然后才执行操作？。

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

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