javascript - jQuery UI 对话框不会正确居中

Question

我有一个想要打开的 jQuery 弹出对话框，max-width我希望它居中。我还想对其内容重复使用相同div的内容。我的问题是，如果您width:auto在打开对话框时进行设置，正如您需要做的max-width那样，如果您首先弹出一些不会导致溢出的文本，然后弹出对话框，则对话框将无法正确居中一些文字：

http://jsfiddle.net/kxCuq/2/

如您所见，第二次弹出窗口向右移动，而不是水平居中。有没有什么办法解决这一问题？

Answer 1

我建议一旦你改变了内容的宽度，销毁并重新创建它，以便 jQuery 可以重新计算宽度和中心。

此外，该maxWidth选项指定对话框可以调整大小的最大宽度，以像素为单位；所以这个选项不能按你期望的方式工作。设置内容的最大宽度。所以我们有：

#dialog {
    max-width: 200px;
    display: none;
}

$("#dialog").dialog({
    modal: true,
    draggable: false,
    width: "auto",
    close: function (event, ui) {
        $(this).dialog("destroy");
    }
});

jsFiddle 上的演示

Answer 2

我不知道为什么这是一个很难的问题。通过为 'ui-dialog' 类设置 css 属性真的可以很容易地完成。

这是做什么：

设置好 html 后，添加这个 jquery：

$('.ui-dialog').css('position','relative');

$('.ui-dialog').css('margin','10px auto');

如果您希望它具有固定的最大宽度，例如 400px，您也可以添加：

$('.ui-dialog').css('max-width','400px');

如果您希望两个框相同且完全相同（第一个弹出窗口和第二个弹出窗口），您可以将其添加到您的 css 中：

.ui-dialog{ position:relative; max-width:200px; margin:10px auto 10px auto; }

这是现场演示链接：

现场演示

Answer 3

width:auto似乎是罪魁祸首。删除它，一切都正确居中。

如果您需要设置宽度，可以在更改内容时使用设置器来更改宽度： $( ".selector" ).dialog( "option", "width", 500 );