jquery-ui - 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 将位置设置为相对，然后使用顶部和左侧将弹出窗口移动到正确的位置。我找到了两种解决问题的方法：

1）两者中较容易的一个：将对话框容器的边距底部设置为负高度。

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

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

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