Как сделать чтоб модальное окно закрывалось при нажатии на область вокруг окна CSS?

Question

Столкнулся с проблемой что незнаю как закрыть модальное окно при клике вокруг этого окна, на саму страницу, или к примеру, другой элемент, также при перезагрузке страницы окно остается а должно пропадать, подскажите как можно это реализовать посредством только 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="#">&times;</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, блок появляется мгновенно, а иногда плавно если просто перезагружать страницу, подскажите в чем причина?

Answer 1

Для отображения и скрытия модального окна правильнее будет использовать свойство display: none; которое полностью исключает элемент. А для того что бы спрятать окно можно сделать отдельный блок, который будет на всю ширину, поставить z-index у него ниже чем у самого модального окна. Далее при клике на этот блок сделать скрытие всего модального окна, это можно сделать через JS.

Transition не работает потому что вы его применяете не к тому блоку, а если вы просто хотите плавно отобразить блок то в jQuery есть прекрасные свойства: .fadeIn() .fadeOut() .fadeToggle(). Информацию про них можете найти в интернете

Answer 2

Пример

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.popup:target {
  visibility: visible;
  opacity: 1;
}

.popup__overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.popup__box {
  margin: 115px auto;
  width: 444px;
  height: 584px;
  background: #FFFFFF;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
  position: relative;
}

<a href="#popup1" class="btn">Button open popup 1</a>

<div id="popup1" class="popup">
  <a href="#" class="popup__overlay"></a>
  <div class="popup__box">
    <h2>Here i am</h2>
    <a class="close" href="#">&times;</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>

БЛОГ НА HUSL

Как сделать чтоб модальное окно закрывалось при нажатии на область вокруг окна CSS?

Ответы (2 шт):