设置jquery对话框的高度

Setting height of jquery dialog box

本文关键字：高度 对话框 jquery 设置      更新时间：2023-11-16

我有一个jquery对话框，其中包含一个图像（img）。我试图设置方框的高度以匹配图像，但我发现两者都设置得比我指定的要小。例如，以下行：

console.log("h1 " + $('#display').height());
$("#display").dialog('option', 'height', img.height);                               
console.log("h2 " + $('#display').height());
console.log("ih " + img.height);

向控制台生成以下输出：

h1 564 
h2 564 
ih 640

这表明$（'#creativeImageDisplay'）.height（）表示内部高度，但选项中的'height'表示外部高度。是否有设置内部高度的方法（使外部高度相应增加）？

编辑

('#display').outerHeight(true) 652 
('#display').outerHeight(false) 652 
('#display')innerHeight() 652

生成对话框后，它将输出如下内容：

<div class="ui-dialog ...">
    <div class="ui-dialog-titlebar ..."> ... </div>
    <div id="display" class="ui-dialog-content ..."> ....</div>
    <div class="ui-dialog-buttonpane ..."> ... </div>
</div>

您可以简单地尝试$("#display").height(im.height());作为内部高度。

HTML:

<div id="panel">
  <input type="button" id="btndialog1" name="btndialog1" value="Show Dialogue1"/>
  &nbsp;
  <input type="button" id="btndialog2" name="btndialog2" value="Show Dialogue2"/>
  <br/>
  <div id="imgdialog1" title="Dialogue1 with Image">
    <p>
      <img src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" id="img1">
    </p>
  </div>
  <div id="imgdialog2" title="Dialogue2 with image">
    <p>
      <img id="img2" src="http://www.xda-developers.com/wp-content/uploads/2011/02/android_boot_image.jpg"/>
    </p>
  </div>
</div>

JQuery:

$(function() {
    $('#imgdialog1').dialog({
        autoOpen: false,
        'width': 'auto',
        'height': 'auto'
    });
    $('#imgdialog2').dialog({
        autoOpen: false,
        'width': 'auto',
        'height': 'auto'
    });
    $("#btndialog1").click(function() {
        $('#imgdialog1').dialog('open');
    });
    $("#btndialog2").click(function() {
        $('#imgdialog2').dialog('open');
    });
});

我做过垃圾箱，试试看http://codebins.com/bin/4ldqpad

只是为了整洁。感谢您的宝贵意见。事实证明，问题是我已经将图像位置设置为"固定"，出于某种原因，这阻碍了自动调整大小的工作。

相关文章：