jQuery对话框为页面添加额外高度

我正在使用jquery对话框弹出一个对话框

当对话框打开时，它会按预期显示对话框，但会增加页面的高度，在大多数屏幕分辨率下，这会导致浏览器上出现垂直滚动条。显然，没有什么东西可以向下滚动查看，因此我们非常希望没有动态滚动条。我试着在整个页面上定位对话div，但我无法摆脱它。它发生在ie和Firefox中

以下是代码的简化版本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#divjQueryPopup').dialog({
            autoOpen: false,
            draggable: true,
            width: 500,
            open: function (type, data) {
                $(this).parent().appendTo('form');
            }
        });
    });

    function showDialog(id) {
        $('#' + id).dialog('open');
    }

    function closeDialog(id) {
        $('#' + id).dialog('close');
    } 
</script>


<div style="height: 500px;">
    <div style="height:500px;">
        <input id="inpTest" type="button" value="Test" onclick="showDialog('divjQueryPopup');" />
    </div>

    <div id="divjQueryPopup" runat="server">
        <div style="padding:10px 20px 10px 20px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
            sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, 
            vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
            luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend 
            option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; 
            est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me 
            lius quod ii legunt saepius. Claritas est etiam processus dynamicus, 
            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, 
        </div> 
    </div>
</div>

$（文档）.ready（函数（）{
$（'#divjquerypopp'）。对话框({
自动打开：错误，
真的，
宽度：500，
打开：功能（类型、数据）{
$（this.parent（）.appendTo（'form'）；
}
});
});
函数显示对话框（id）{
$（'#'+id）.dialog（'open'）；
}
函数关闭对话框（id）{
$（'#'+id）.dialog（'close'）；
} 
Lorem ipsum dolor sit amet，一位杰出的领导者，
这是一个巨大的挑战。
但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。
在亨德雷特的两个房间里都有一个小房间，
在爱欲与积存与尊严之争中，欧盟的封建主义不存在
这是一个很好的解决方案。Nam liber Temporal cum Solta nobis eleifend
选项congue nihil DIT DOMMING id quod mazim PLACER facer possim assum。典型的非哈本语；
这通常是法律依据。莱克托雷斯·勒盖尔的调查演示
刘古德二世，勒格特·萨皮乌斯。单簧管是动态过程，
问：这是一种选择。这是哥提卡海岸的一片沼泽，

之所以会发生这种情况，是因为对话框“出现”在屏幕底部，然后有样式

位置：相对
和
顶部：-任何px
将其移动到位。此样式直接应用于div

Div类：

ui对话框ui小部件ui小部件内容ui角落所有ui可拖动ui可调整大小

直接应用样式：

显示：块；z指数：1001；大纲：0px无；位置：相对位置；高度：自动；宽度：500px；顶部：-535.5px；左：540px

相反，将样式更改为：
position:absolute
，顶部为正

您可以使用firebug来验证这一点。
您得到的是滚动条，因为当messagebox出现时，它是用

位置：相对

这将保持其在文档中的位置，但显示相对于其原始位置的div。因此，当页面变得可见时，页面会变长。您需要将其更改为position:absolute，以便将其从文档流中删除。您还需要修改坐标。
或者，您可以向css中添加
body{height:500px；}


编辑是应用于对话框的“绝对位置”