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

【问题标题】：jQuery dialog adds extra height to pagejQuery 对话框为页面增加了额外的高度
【发布时间】：2016-03-04 08:43:04
【问题描述】：

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

【问题讨论】：

标签： jquery html css jquery-ui jquery-ui-dialog

【解决方案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 来验证这一点。

【讨论】：

【解决方案2】：

您正在获得滚动条，因为当消息框出现时，它被定位为

position:relative

这会保留它在文档中的位置，但会显示相对于其原始位置的 div。因此，当它可见时，页面会变长。您需要将其更改为 position:absolute 以便将其从文档流中取出。您还需要修改坐标。

【讨论】：

【解决方案3】：

或者，您可以将 body {height: 500px;} 添加到您的 CSS。

a little fiddle to play with

EDIT in this this version 是应用于对话框的“绝对位置”

【讨论】：