自动调整 jQuery 对话框

Question

我有一个现在设置为特定高度的 jQuery UI 对话框：

$(".event").click(function () {
        var id=$(this).attr("data-id");   

        $("<div></div>")

            .addClass("modal-dialog")
            .appendTo("body")

            .dialog({
                close: function() { $(this).remove(); },
                modal: true,
                height: 600,
                width: 700
            })
            .load("/Home/users?xid=" + id);

    });

我希望我的对话框根据其中的内容调整其高度。 我尝试更改为height: auto，但它根本无法打开。

我还发现了这个帖子： Automatically resize jQuery UI dialog to the width of the content loaded by ajax 但我不明白如何将它应用到我自己的代码中。

Answer 1

我要做的是加载到子元素中，然后在load 回调中将对话框高度设置为子元素的高度：

$(".event").click(function () {
    var id=$(this).attr("data-id");   

    var dialogElement = $("<div></div>")
        .addClass("modal-dialog")
        .appendTo("body")
        .dialog({
            close: function() { $(this).remove(); },
            modal: true,
            height: 600,
            width: 700
        });
    $("<div></div>").appendTo(dialogElement).load("/Home/users?xid=" + id, function(){
        dialogElement.dialog("height", $(this).height());
    });

});

您可能希望实际让它比孩子稍大，以便为所有 UI 留出空间。