维护一个包含动态内容的对话框

I would have a dialog with the following

我会与以下内容进行对话

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    title:"Check Order Status",
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

And when the user hits the find button, it runs Ajax and returns orders to the dialog, and it gets dynamically re-sized, but it only extends the box down. Is there way to make the box extend up and down so that the dialog remains centered?

当用户点击查找按钮时，它会运行Ajax并将命令返回到对话框，并且它会动态调整大小，但它只会向下扩展框。有没有办法让盒子上下延伸，以便对话框保持居中？

Also if there was enough content then it could potentially go beyond the bounds of the page, so I would think I could use a maximum height to prevent that, but what do I do if they re-size the window?

此外，如果有足够的内容，那么它可能超出页面的范围，所以我认为我可以使用最大高度来防止这种情况，但如果他们重新调整窗口大小，我该怎么办？

I tried adding maxHeight: 500, and that didn't stop it from extending off the bottom.

我尝试添加maxHeight：500，这并没有阻止它从底部延伸。

2 个解决方案

#1

You have code that puts the dialog in the middle of the screen I presume? Run that after it gets re-populated with new information.

您有代码将对话框放在我假设的屏幕中间吗？在重新填充新信息后运行它。

Write some new code that ensures the box isn't taller than the window. If it is, set the height of the dialog to the height of the window (or less if you want padding), and set overflow to scroll. Run this code whenever they resize the window as well.

写一些新代码，确保框不高于窗口。如果是，则将对话框的高度设置为窗口的高度（如果要填充，则设置为较小），并设置溢出以滚动。每当他们调整窗口大小时运行此代码。

#2

OK, well I've got it working, well sort of not 100%, but pretty darn close.

好吧，我已经有了它的工作，有点不是100％，但非常接近。

I set the position to 'top' since auto always expands down. Then I added an open function as suggested in a ticket as a workaround to get autoHeight to respect maxHeight.

我将位置设置为“顶部”，因为汽车总是向下扩展。然后我在票证中添加了一个open函数作为解决方法，让autoHeight尊重maxHeight。

That said, I really wanted to use body height, not document, and I am not sure why I had to subtract 200 from that ?

也就是说，我真的想要使用身高，而不是文件，我不知道为什么我不得不从中减去200？

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    position: 'top',
    title:"Check Order Status",
    open: function(event, ui) {
        $(this).css({'max-height': $(document).height()-200, 'overflow-y': 'auto'});
    },
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

#1