当我单击一个链接时,会出现一个弹出窗口。问题是它没有与屏幕中心对齐。顺便说一句,我的代码还帮助网站(和弹出窗口)在移动版本中看起来很完美。
HTML 代码:
<a href="#" data-reveal-id="exampleModal">POP UP</a>
<div id="exampleModal" class="reveal-modal">
<h2>POP UP</h2>
<p>
<font size="4">window window window.window window window. window.
</font>
</p>
<a class="close-reveal-modal">×</a>
</div>
CSS 代码:
.reveal-modal
{
background:#e1e1e1;
visibility:hidden;
display:none;
top:100px;
left:50%;
width:820px;
position:absolute;
z-index:41;
padding:30px;
-webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 10px rgba(0,0,0,0.4);
box-shadow:0 0 10px rgba(0,0,0,0.4)
}
我也试过放一些 right:50% 但没用。不应该下类吗?
最佳答案
这些是要进行的更改:
CSS:
#container {
width: 100%;
height: 100%;
top: 0;
position: absolute;
visibility: hidden;
display: none;
background-color: rgba(22,22,22,0.5); /* complimenting your modal colors */
}
#container:target {
visibility: visible;
display: block;
}
.reveal-modal {
position: relative;
margin: 0 auto;
top: 25%;
}
/* Remove the left: 50% */
HTML:
<a href="#container">Reveal</a>
<div id="container">
<div id="exampleModal" class="reveal-modal">
........
<a href="#">Close Modal</a>
</div>
</div>
关于css - 如何使弹出窗口显示在屏幕中央?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19467693/