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"]不是最好的解决方案,因为它根据创建时视口的大小为对话框分配了一个explict top:和left:css属性.

当我试图在屏幕上垂直放置一个对话框中心时,我遇到了同样的问题.这是我的解决方案:

在options我的.dialog()功能部分,我通过了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

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

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

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