Question

我有一个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

Answer 1

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

<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());作为内在高度。

Answer 2

<强> 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

Answer 3

只是为了整洁。感谢您的所有有用评论。原来问题是我将图像位置设置为“固定”，这出于某种原因阻止了自动调整大小的工作。

设置jquery对话框的高度

3 个答案: