jquery对话框 - 向下推送背景内容

Question

我在jquery对话框弹出窗口遇到一个奇怪的问题，我希望有人可以提供帮助。弹出代码如下所示。除了一件事，它工作正常。当显示弹出窗口时，它有时会将背景内容向下推动大约对话窗口的高度。有没有办法防止这种情况发生？

$("#searchPopUp").dialog({
    modal: true,
    bgiframe: false,
    autoOpen: false,
    resizable: true,
    position:{ my: "center", at: "center", of: window },
    title: 'Choose one search criteria and<br/>populate the corresponding field below:',
    width: 400,
    close: function( event, ui ) {},
    buttons: {
        "Search": function() {
            $("#viewDevicesSearchForm\\:searchCommandLink").click();
        }, 
        "Close": function() {
            $( this ).dialog( "close" );
        }  
} 
}); 

Answer 1

这是因为jquery将position设置为relative，然后使用top和left将弹出窗口移动到正确的位置。我找到了两种解决问题的方法：

1）两者中更容易：将对话框容器的margin-bottom设置为负高度。

popup.dialog({
            ...other options...,

            open : function() {
                popup.css('margin-bottom', 0 - popup.height());
            },
        });

2）对于对话框容器，将位置设置为绝对位置并调整顶部和左侧。要将它放在正确的位置，请将放置位置的偏移位置添加到jquery设置的顶部值。左边的计算类似。这应该这样做，但对话框的不同参数可能需要不同的计算。