javascript - 将 jQueryUI 对话框的高度调整为与内容一样高，达到最大值

Question

使用 jQueryUI 的对话框，我想弹出信息。我的问题是我想将对话框的高度设置为内容的高度。如果我不指定高度，这就完美了。高度是根据内容的高度自动计算的。那么问题是如果内容非常高，对话框也会变得非常高并低于窗口...在这种情况下 maxHeight 也不能​​很好地工作。

所以我已经能够通过在显示弹出窗口后调整高度和位置来稍微解决这个问题。但是，在加载内容时(通过 ajax)，它会很好地位于屏幕下方。只有完成后，我才能重新调整窗口。我宁愿没有那种尴尬的延迟。

更新:原来我想要的不仅仅是 maxHeight。我想要一个最大初始高度。所以对话框加载数据后，只能长到一定高度。但之后，您可以展开窗口。实现这个很容易:

$('<div><div></div></div>').attr('title', options.title).appendTo('body').dialog({
    open: function() {
        $(this).children().css('maxHeight', maxInitialHeight).load(url, function() {
            thisDialog.$dialog.dialog('option', 'position', 'center');
        });
    }
});

这将从“url”动态加载一个对话框，其内容达到 maxInitialHeight 高度。嵌套的 2 个 div 是必需的。

Answer 1

您可以将您的内容插入 <div class="dialog-data" /> 中并使该 div 成为您对话框的内容。

然后您可以使用 CSS 指定 max-height和 overflow: auto给你的div.dialog-data .