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验证这一点。

Answer 2

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

position:relative

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

Answer 3

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

a little fiddle to play with

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

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

3 个答案: