Question

我试图让jQuery UI对话框窗口自动调整大小以适应它的内容，同时保持最大高度（因此对话框不会“超出”窗口），我有点卡住了。下面的代码确实有效，但是对话框在窗口顶部保持打开，而不是居中（我希望它出现在哪里）。

jQuery(".dialog").dialog({
    autoOpen: false,
    autoResize: true,
    height: "auto",
    hide: "fold",
    maxHeight: 500,
    open: function(event, ui) { jQuery(this).css({"max-height": 500, "overflow-y": "auto"}); },
    resizable: false,
    show: "fadeIn",
    width: 500
});

open函数可以解决问题，但是在打开对话框后它会执行此操作（您实际上可以看到它在运行时调整大小）。任何人都可以想到让它在窗口元素中重新定位的技巧吗？我尝试使用.position（），但无济于事：

open: function(event, ui) {
    jQuery(this).css({"max-height": 500, "overflow-y": "auto"});
    setTimeout("jQuery(this).position(my: \"center\", at: \"center\", of: window)", 1000);
},

还有其他建议吗？

Answer 1

我提出的最好的技巧是在创建对话框之前自己预先计算内容的大小（通过将它们添加到其css类将它们放置在与屏幕相关的负位置的DOM元素中），以及根据该大小是否大于或小于我要使用的最大大小，更改我传入height的值。

PS：我不确切知道position的确切方式，但您可能想尝试：

setTimeout("jQuery(this).position({my: 'center', at: 'center', of: window})", 1000);

jQuery对话框在打开之前调整大小

1 个答案: