问题描述
|
我希望对话框具有最大高度设置,但如果内容较小,则缩小以执行
height = \'auto\'
的操作。在JQuery UI对话框中可以吗?
解决方法
您可以通过执行以下操作来实现:
的HTML
<div id=\"dialog\" title=\"Dialog Title\">
Dialog content
</div>
的JavaScript
$(\'#dialog\').dialog({
resizable: false,minHeight: 0,create: function() {
$(this).css(\"maxHeight\",400);
}
});
在jsFiddle上检查测试用例。
,我用这个:
$(\'#dialog\').dialog({
maxHeight: $(window).height(),open: function() {
$(this).dialog(\'option\',\'maxHeight\',$(window).height());
}
});
当窗口更改大小时,在\“ open \”中重置maxHeight非常有用。
,您可以这样做:
$(\'#testing\').resizable(\"enable\");
$(\'#testing\').dialog({ maxHeight: 400 });
<div id=\"testing\" class=\"ui-widget-content\">
<h3 class=\"ui-widget-header\">Resizable</h3>
</div>
,在对话框“ 5”之后,并用“ 6”填充:
$(\"#div\").css(\'max-height\',\'500px\');
,jQuery UI对话框中的错误#4820适用,您可能对变通办法感兴趣。
,我认为您可以将height8ѭ和maxHeight
一起使用,并在div内容高度<对话框maxheight时适合对话框的高度。对话框为“ 10”时执行此操作。像这样:
<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
,让我投入2美分。
像这样创建CSS样式
.d-maxheight { max-height:200px; }
现在,简单地告诉对话框将该类应用于对话框
$(document).ready(function(){
$(d).dialog({
dialogClass: \'d-maxheight\',height:400
});
});
这是jsbin中的示例
只要您的内容小于最大高度,它将自动调整大小。否则,最大高度将生效,对话框中将显示一个滚动条。
,您可以将对话框内容包装在另一个应用了max-height的div中,如下所示:
<div id=\"dialog\">
<div style=\"max-height: 400px;\">
POPUP CONTENTS GO HERE
</div>
</div>