jQuery对话框为页面增加了额外的高度

Question

我正在使用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>

Answer 1

发生这种情况是因为对话"出现"在屏幕的底部,然后具有样式position: relative并将top: -whatever px其移动到位.此样式直接应用于div.

Div类:
ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable

直接应用风格:
display: block; z-index: 1001; outline: 0px none; position: relative; height: auto; width: 500px; top: -535.5px; left: 540px;

相反,将样式更改为:position: absolute使用正顶部.

您可以使用firebug来验证这一点.