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

Question

一个有大量文本的 JQuery UI 对话框小部件太大了，对话框不能适应窗口（用户必须滚动浏览器窗口; 用户体验：“那是一个 bug”）：

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

将height选项设置为“自动”不起作用，对话框仍然无法适应窗口大小：

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

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

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

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

注：此内容涉及IT技术，可能需要专业背景知识。

$("#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/

这应该很简单，但我似乎找不到正确的选项...

提示：这段内容涉及IT技术，可能需要更多上下文才能提供最准确的翻译。

- basic6

Answer 1

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

此外..当对话框没有固定高度（height: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);
    }
});

- paulitto

Answer 2

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

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

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

示例：最大高度：http://jsfiddle.net/IrvinDominin/kNHu9/

- Irvin Dominin

---

我认为问题在于如何使对话框高度自适应，除非超过一定大小。 height：$（window）.height（）* .2 是否会禁用“自适应”功能？ - Michael Scheper