Question

我希望对话框具有最大高度设置，但是，如果内容较小，则缩小以执行height = 'auto'所做的操作。这可能在JQuery UI对话框中吗？

Answer 1

您可以通过执行以下操作来实现此目的：

<强> HTML

<div id="dialog" title="Dialog Title">
    Dialog content
</div>

<强>的JavaScript

$('#dialog').dialog({
    resizable: false,
    minHeight: 0,
    create: function() {
        $(this).css("maxHeight", 400);        
    }
});

查看test case on jsFiddle。

Answer 2

我用这个：

$('#dialog').dialog({
    maxHeight: $(window).height(),
    open: function() {
        $(this).dialog('option', 'maxHeight', $(window).height());
   }
});

当窗口改变大小时，在“打开”中重置maxHeight非常有用。

Answer 3

你可以这样做：

 $('#testing').resizable("enable");
 $('#testing').dialog({ maxHeight: 400 });


<div id="testing" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

Answer 4

在对话框.open()之后填写.html()：

$("#div").css('max-height','500px');

Answer 5

jQuery UI Dialog中的

Bug #4820适用，您可能对解决方法感兴趣。

Answer 6

我认为您可以与height和maxHeight一起使用，并在您的div内容高度＆lt;对话框maxheight。当对话框为open时执行此操作。像这样：

<div id="dialog">
  <div id="contents">
    <input type="text" style="height:3000px"
  </div>  
</div>


    $('#dialog').dialog({
      autoOpen: false,
      maxHeight:400,
      height:400,
      buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open:function(){
       var s = $('#contents').height();
       var s2 = $(this).dialog( "option", "maxHeight" );
       if(s < s2){
         $(this).height(s);
       }
    }
});

尝试更改style="height:3000px值： http://jsbin.com/iwecuf/2/edit

Answer 7

让我投入2美分。

像这样创建一个CSS样式

.d-maxheight {  max-height:200px; }

现在只需告诉对话框将该类应用于对话框

$(document).ready(function(){
  $(d).dialog({
    dialogClass: 'd-maxheight',
    height:400
  });
});

Here is an example in jsbin

只要您的内容小于最大高度，它就会自动调整大小。如果不是最大高度将生效，您将在对话框中获得一个滚动条。

Answer 8

您可以将对话框内容包装在另一个应用了max-height的div中，如下所示：

less

使用jquery UI对话框，无论如何都有最大高度，如果它更小则使用'auto'

8 个答案: