Question

包含大量文本的JQuery UI Dialog小部件太大，对话框不适合窗口（用户必须滚动浏览器窗口;用户体验：＆＃34;这是一个bug＆＃34）：

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

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

将高度选项设置为＆＃39; auto＆＃39;没有帮助，对话框仍然不适合窗口：

$("#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/ ......但那不是我想要的。
如果需要，窗口小部件的大小应该会增加（基于内容）但不会超出窗口。

基本上我正在寻找类似的东西（＆＃39; 90％＆＃39;不起作用，因为预计会出现以像素为单位的数值）：

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

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

这可能很简单，但我似乎找不到合适的选择......

Answer 1

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

并且..当对话框没有固定高度（高度：自动）时，看起来它不尊重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/

限制JQuery UI对话框小工具的大小？

2 个答案: