维护一个包含动态内容的对话中心答案

【问题标题】：Maintain a dialog center with dynamic content维护一个包含动态内容的对话中心
【发布时间】：2011-02-14 06:09:15
【问题描述】：

我会与以下对话

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    title:"Check Order Status",
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

当用户点击查找按钮时，它会运行 Ajax 并将命令返回给对话框，并且它会动态调整大小，但它只会向下扩展框。有没有办法让框上下延伸，使对话框保持居中？

此外，如果有足够的内容，那么它可能会超出页面的范围，所以我认为我可以使用最大高度来防止这种情况发生，但是如果他们重新调整窗口大小我该怎么办？

我尝试添加 maxHeight: 500，但这并没有阻止它从底部延伸。

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我猜你有把对话框放在屏幕中间的代码吗？在重新填充新信息后运行它。

编写一些新代码以确保框不高于窗口。如果是，则将对话框的高度设置为窗口的高度（如果需要填充，则设置为更低），并将overflow 设置为scroll。每当他们调整窗口大小时运行此代码。

【讨论】：

否，默认情况下它显示在屏幕中间，我自己不会调整对话框的大小，它会自动将宽度和高度设置为 auto

【解决方案2】：

好的，我已经成功了，虽然不是 100%，但非常接近。

我将位置设置为“顶部”，因为auto 总是向下扩展。然后我按照in a ticket 的建议添加了一个开放函数作为解决方法，让autoHeight 尊重maxHeight。

也就是说，我真的想使用身高，而不是文档，我不知道为什么要从中减去 200？

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    position: 'top',
    title:"Check Order Status",
    open: function(event, ui) {
        $(this).css({'max-height': $(document).height()-200, 'overflow-y': 'auto'});
    },
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

【讨论】：