我有一个带有 form 和 div 的页面:
<body>
<form id="form1" runat="server">
...
</form>
<div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none">
<div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;">
...
</div>
</div>
</body>
单击按钮时，我使 div 可见，并且我希望它覆盖整个页面，而内部 div 位于中间(在居中，水平和垂直。)就像弹出模式一样。
举例说明:
当前 html 不符合以下条件:
div并未覆盖整个页面，它位于form后面，而不是覆盖它。- 内部
div仅水平居中，不垂直居中。
我在这里缺少什么？
我的方法“浏览器兼容性”安全吗？ (也许我应该寻找 Jquery 解决方案？)
最终解决方案:
我最终使用:
- Didier G answer 解决覆盖问题。
- Jquery 到 center the div on screen
- rounding the corners of the div 的 CSS3
最佳答案
使用稍微不同的标记和 CSS 来定位叠加层和弹出窗口。
构建一个简单的标记，如下所示:
<form id="form1" runat="server">
...
</form>
<div id="overlay"></div>
<div id="popup">Popup</div>
请注意，我没有将弹出窗口放在叠加层中。虽然这样做没有什么坏处，但如果您想使用 css 不透明度设置叠加层的样式，则其中包含的所有内容也将是半透明的。
然后使用以下 CSS:
#overlay {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
z-index:998;
background-color: Black;
opacity: .5;
}
#popup {
position: absolute;
width:50%;
background-color:#8DA5C6;
z-index: 999;
}
- 两个元素都必须具有
position:absolute才能脱离页面流。 - 覆盖层必须覆盖整个空间。这是通过
上、左、右、下、宽、高来实现的
- 使用
z-index，您可以让它们保持在其他事物之上。较低的一个用于覆盖层，较高的一个用于弹出窗口
您可以查看这个fiddle一个工作示例。
注意:
这不会使弹出窗口居中。它需要更多的工作才能做到这一点，而且有点复杂(弹出窗口是否具有固定大小，如果在调整窗口大小时弹出窗口保持居中......)。
我猜这需要一些 JavaScript。
您不能在绝对定位元素上使用 margin: 0 auto;。
关于jquery - 如何将DIV放置在页面的顶部和中间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8502019/