1
我正在为网站提供弹出功能。我有下面链接的网站。点击每个新闻项目后,会出现一个弹出框,以确认观看者即将离开该网站。问题是如果观看者点击页面底部附近的链接之一,底部的页脚栏与弹出框重叠。我尝试设置相对位置并调整两个元素上的Z值,但它不起作用(我猜这是元素父问题)。在Wordpress站点上重叠CSS问题
http://novexbiotech.emorydayclients.com/press/
注:弹出框目前只使用CSS。这是下面的代码弹出的JS提琴:
https://jsfiddle.net/r1goLbqw/
HTML
<!-- Anchor -->
<a href="#popup1">Course Login</a>
<!-- Popup -->
<div id="popup1" class="overlay">
<div class="popup">
<h2>Student Portals</h2>
<a class="close" href="#">×</a>
<div class="content">
Content
</div>
</div>
</div>
CSS
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
text-align:center;
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 400px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
top:300px;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup .content {
max-height: 400px;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
Thanks for the help!