自动调整大小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()); 
    }); 

}); 

您可能要真正使它比孩子稍大，这样所有的用户界面都有空间。