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

});

您可能希望实际上比孩子稍微大一点，以便为所有用户界面留出空间。

自动调整jQuery对话框

1 个答案: