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

直接应用样式:
显示: block ； z-指数:1001；轮廓:0px 无；position:relative；高度:自动；宽度:500px；顶部:-535.5px；左:540px;

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

您可以使用 Firebug 验证这一点。