Столкнулся с проблемой что незнаю как закрыть модальное окно при клике вокруг этого окна, на саму страницу, или к примеру, другой элемент, также при перезагрузке страницы окно остается а должно пропадать, подскажите как можно это реализовать посредством только CSS? код прилагается
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 115px auto;
width: 444px;
height: 584px;
background: #FFFFFF;
box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
position: relative;
transition: all 1s ease-in-out;
}
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
PS. еще почему-то не работает свойство transition, блок появляется мгновенно, а иногда плавно если просто перезагружать страницу, подскажите в чем причина?