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。

股利类：
ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable

直接应用的样式：以积极的顶部position: absolute：
display: block; z-index: 1001; outline: 0px none; position: relative; height: auto; width: 500px; top: -535.5px; left: 540px;

相反，改变风格。

你可以使用萤火虫来验证。

Answer 2

你所得到的滚动条，因为当消息框出现它被定位

position:relative

这使得它在文档中的位置，但相对于它的股利原来的位置显示。所以当它变得可见时，页面变得更长。您需要将其更改为绝对位置，以便将其从文档流中提取出来。你也需要修改坐标。

Answer 3

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

a little fiddle to play with

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