Question

由于表格项目的增加导致页面变长，如果我点击按钮打开对话框，它会显示在页面顶部，我必须滚动回顶部才能查看。我希望它出现在视图端口的中间，无论我在页面上。

我正在向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或类似的东西。所以请我不要建议那些解决方案。大家都知道.. 请回复，提前谢谢。

Answer 1

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

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

现在提出您的问题：不要提供元素position:absolute，而是将其更改为position:fixed。这使您可以将相对于窗口设置为>，即使您向上和向下滚动页面的其余部分，它也将保持在相同的位置。请参阅jsfiddle上的一个简单示例。

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

如何在页面的可视区域中间放置一个半透明背景的js对话框？

1 个答案: