всплывающего окна содержит всю страницу

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-индекс .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>