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

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 的大小是大于还是小于我要使用的最大大小，更改我为height 传递的值。

PS：我不知道position 的具体工作原理，但您可能想尝试一下：

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