限制 JQuery UI 对话框小部件的大小？

Question

其中包含大量文本的 JQuery UI 对话框小部件太大，对话框不适合窗口（用户必须滚动浏览器窗口；用户体验：“这是一个错误”）：

$("#div_dialog").dialog({title: "Header"});

http://jsfiddle.net/w92TY/83/

将高度选项设置为“自动”没有帮助，对话框仍然不适合窗口：

$("#div_dialog").dialog({title: "Header", width: 'auto', height: 'auto'});

http://jsfiddle.net/w92TY/84/

将初始大小设置为固定值会起作用...

$("#div_dialog").dialog({title: "Header", width: 100, height: 100});

http://jsfiddle.net/w92TY/85/ ...但这也不是我想要的。
如有必要，小部件应该只增加大小（基于内容），但不能超过窗口。

基本上我正在寻找这样的东西（'90%' 不起作用，因为需要以像素为单位的数值）：

$("#div_dialog").dialog({title: "Header", maxHeight: '90%'});

http://jsfiddle.net/w92TY/87/

这可能真的很简单，但我似乎找不到正确的选择...

Answer 1

您可以使用$(window).height() * 0.9 获取窗口的 90%，还可以在对话框打开时动态设置最大高度（以防窗口被调整大小/旋转）。

而且.. 当对话框没有固定高度（高度：auto）时，它看起来不尊重 maxHeight 属性，因此您可以通过 max-height css 属性设置它，在您第一次调整对话框大小后，它应该获得固定高度并且 maxHeight 将从那时开始工作

$("#div_dialog").dialog({
    title: "Header", 
    maxHeight:$(window).height() * 0.9,
    open:function(event, ui){
        $(this).css("max-height", $(window).height() * 0.9);
    }
});

Answer 2

默认情况下height 属性为auto，因此对话框将根据其内容自动增长。

您可以将height 和maxHeight 设置为窗口的百分比，例如：

$(function () {
    $("#div_dialog").dialog({
        title: "Header",
        height: $(window).height() * .2,
        maxHeight: $(window).height() * .2
    });
});

演示：maxHeight：http://jsfiddle.net/IrvinDominin/kNHu9/