jQuery对话框-向下推送背景内容 [英] jquery dialog - push the background content down

问题描述

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

I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?

$("#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" );
        }  
} 
}); 

推荐答案

这是因为jquery将位置设置为相对，然后使用顶部和左侧将弹出窗口移到右侧.我发现了两种解决此问题的方法:

This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:

1)两者中的一个比较容易:将对话框容器的下边距设置为负高度.

1) The easier of the two: set margin-bottom of the dialog container to negative its height.

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

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

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

2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.

这篇关于jQuery对话框-向下推送背景内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！