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

}); 

您可能要真正使它比孩子稍大，這樣所有的用戶界面都有空間。