弹出包含整个页面

Question

我在我的网站 一个小问题，我添加了一个新的弹出窗口，但不知它不正常工作，我用这个链接 http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript/ 和我的网站上漂浮，在内容和其他内容仍清晰可见不知何故，请看看www.kareem-helal.com/metin并按下Inregistrare看看会发生什么 您可以检查查看页面源代码或这里的一小部分

<li><a id="a2" href="#popup1">ÎNREGISTRARE</a></li> 
     <div id="popup1" class="overlay"> 
    <div class="popup"> 
     <h2>Here i am</h2> 
     <a class="close" href="#">×</a> 
     <div class="content"> 
      Thanks for pop me out of that button, but now I'm done so you can close this window. 
     </div> 
    </div> 
</div> 

和CSS

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
} 
.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 70px auto; 
    padding: 20px; 
    background: #fff; 
    border-radius: 5px; 
    width: 30%; 
    position: relative; 
    transition: all 5s ease-in-out; 
} 

.popup h2 { 
    margin-top: 0; 
    color: #333; 
    font-family: Tahoma, Arial, sans-serif; 
} 
.popup .close { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    transition: all 200ms; 
    font-size: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #333; 
} 
.popup .close:hover { 
    color: #06D85F; 
} 
.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

@media screen and (max-width: 700px){ 
    .box{ 
    width: 70%; 
    } 
    .popup{ 
    width: 70%; 
    } 
} 

我真的不知道这个问题有人可以帮忙吗？

Answer 1

添加的z-index到.overlay类

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
    z-index:9999;/*Add this property*/ 
} 

取代你的HTML像

<div id="popup1" class="overlay"> 
    <div class="popup"> 
     <h2>Here i am</h2> 
     <a class="close" href="#">×</a> 
     <div class=""> 
      Thanks for pop me out of that button, but now i'm done so you can close this window. 
     </div> 
    </div> 
</div>