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

Demo on 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; }

这是现场演示链接：

Live Demo

Answer 3

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

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

jQuery UI对话框无法正确居中

3 个答案: