Question

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

所以我通过在显示弹出窗口后调整高度和位置来解决这个问题。但是，在加载内容时（通过ajax），它远远低于屏幕。只有在完成之后我才能重新调整窗口。我宁愿没有那种尴尬的延迟。

更新：原来我想要的东西不仅仅是maxHeight。我想要一个最大的INITIAL高度。因此，在使用数据加载对话框后，它只能增长到一定的高度。但之后，你被允许扩展窗口。这很容易实现：

$('<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" />内插入内容，并将该内容作为对话框的内容。

然后，您可以使用CSS为max-height指定overflow: auto和div.dialog-data。

Answer 2

也许就像这样

options.open = function() {
    var dialog = $(this).dialog('widget');
    var content = dialog.find('.ui-dialog-content');
    $.ajax({
        url: 'this your url',
        success: function(result, status, xhr) {
            content.empty().append(result);
            content.dialog(
                'option',
                {
                    // this your options
                }
            );
        };
    });
};

Answer 3

这是一个更为简洁的方式，对我有用

$(targetElement).css('max-height', '400px').dialog({
  'resize' : function() {
    $(this).css('max-height', '1000px');
  }
});

首先在你放入对话框的东西上设置最大高度。它出现在屏幕上没有更大的400px。但是一旦你开始拖动它，就会解除限制。 ......正是我想要的，以及多更干净的代码。

我也尝试将max-height设置回'auto'，但这似乎并没有结果，所以1000px对我来说没问题。

在jQueryUI对话框上调整高度，使其与内容一样高，最高可达到最大值

3 个答案: