0

由于表格项目的增加，页面变得更长，如果我单击按钮打开对话框，它会显示在页面顶部，我必须滚动回顶部才能查看它。我希望它出现在我在页面上的任何位置的视口中间。

我正在向 php 页面发出 ajax 请求，以构建 html 标记，然后将 responseText 附加到 div 元素。

背景的CSS代码以及将覆盖它的对话框如下：

<script type='text/javascript'>
 div.Background {
background: #FFF;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=28); 
-moz-opacity: 0.8; 
opacity: 0.8;
z-index:999;
 }
   div.Box {
border:1px solid #bbb;  
background:white;
position:absolute;
left:50%;
top:50%;
margin-left:-280px;
margin-top:-195px;
width:500px;
height:420px;
z-index:1000;
 -moz-box-shadow: 1px 3px 3px #ccc;
  -webkit-box-shadow: 1px 3px 3px #ccc;
  box-shadow: 1px 3px 3px #ccc;
 }

 </script>

另请注意，我已将背景位置更改为相对保持框的绝对位置无济于事，并且我不想使用任何 jquery 或类似的东西。所以请我要求不要提出这些解决方案。只是让你们知道..请回复，提前谢谢。

4

1 回答 1

0

我注意到的第一件事是您的 CSS 规则包含在脚本标记中，这是不正确的。它们应该在样式标签内，即：

<style type="text/css">
    /*CSS rules here */
</style>

现在问你的问题：不要给元素position:absolute，而是把它改成position:fixed. 这使您可以相对于窗口定位框，即使您上下滚动页面的其余部分，它也会保持在相同的位置。请参阅jsfiddle上的一个简单示例。

需要注意的一件事是 IE6 无法识别position:fixed，但您可能并不关心这一点。

于 2012-07-12T13:27:39.483 回答