如何自动调整 jQuery 弹出对话框的大小？

Question

长期以来，我一直在 jQuery 弹出对话框中使用相同的方法和脚本，这非常适合我对相当静态的内容的要求，即高度从来都不重要，因为内容总是一样的。

我现在面临的问题是，我想将其用于内容现在是动态且高度发生变化的不同应用程序。

我已经通读了 jQuery 文档，阅读了 Stack Overflow 上的一些其他帖子，但就是无法正确理解。总之，我想将 container/popup 的高度设置为自动以迎合内容。

它可能不是最好的剧本，但就是这样：-

<script>
    function GetPRComments(txt){
    $.get("pur_req_comments.cfm?XReqNo=" + txt, function(data) {
        $("#CommentsPopup").html(data);
        $("#CommentsPopup").dialog({
            height: 300,
            width: 465,
            title: "Purchase Requisition Details: " + txt,
            modal: true,
            dialogClass: "PRComments",
        });
    });
    }
</script>

下面是基于上述脚本的输出视图。其中一个记录有简要的描述，另一个有更详细的描述。我想要实现的是消除多余的 space 并使内容适合。

我（非常简单地）希望 Height: 'auto' 能解决这个问题，但遗憾的是这似乎无法解决问题。我觉得这可能需要重写，但不确定。我也尝试过使用 maxWidth。

我也阅读了 ("resize", "auto") 但我认为这对我现有的脚本不起作用？我就是看不懂。

任何帮助或指点都会有所帮助。杰克

Answer 1

考虑使用此方法 "auto":

function GetPRComments(txt){
  $.get("pur_req_comments.cfm?XReqNo=" + txt, function(data) {
    $("#CommentsPopup").html(data).dialog({
      height: "auto",
      width: 465,
      title: "Purchase Requisition Details: " + txt,
      modal: true,
      dialogClass: "PRComments",
    });
  });
}

如果要设置一个height，可以计算出来

function GetPRComments(txt){
  $.get("pur_req_comments.cfm?XReqNo=" + txt, function(data) {
    $("#CommentsPopup").html(data);
    var h = $("#CommentsPopup").height();
    if(h < 300){
      h = 300;
    }
    $("#CommentsPopup").dialog({
      height: h,
      width: 465,
      title: "Purchase Requisition Details: " + txt,
      modal: true,
      dialogClass: "PRComments",
    });
  });
}

如何自动调整 jQuery 弹出对话框的大小？

How do you Autosize a jQuery Popup Dialog box?

jquery

jquery-ui