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

Question

一个包含大量文本的JQuery UI Dialog小部件太大,对话框不适合窗口(用户必须滚动浏览器窗口;用户体验:"这是一个bug"):

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

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

将height选项设置为'auto'没有帮助,对话框仍然不适合窗口:

$("#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%，还可以在对话框打开时动态设置最大高度（以防窗口调整大小/旋转）。

而且..当对话框没有固定高度（高度：自动）时，它似乎不尊重 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);
    }
});