Закрытие модального окна после перезагрузки страницы

Question

собственно вопрос: Если оставить modal окно откритым после перезагрузки страницы оно снова откривается! Подскажите как сделать так чтобы оно оставалось закритим, пока пользователь снова не нажмет на соответствующую кнопку?

.modal {
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

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

.modal__content {
  border-radius: 4px;
  position: relative;
  width: auto;
  max-width: max-content;
  background: #fff;
  padding: 1em 2em;
  overflow-y: auto;
  height: -webkit-fill-available;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

<div id="one-modal" class="modal">
  <div class="modal__content">
    <h1>Title</h1>

    <p>
      Content
    </p>

    <div class="modal__footer">
      Footer
    </div>

    <a href="#" class="modal__close">&times;</a>
  </div>
</div>

<a href="#one-modal">
  Кнопка
</a>

Я пыталась добавить такой код но он не сработал!

<script type="text/javascript">
    $('#modal_close').on('hide', function() {
      window.location.reload();
    });
</script>

Answer 1

Дело в том, что вы используете псевдо класс target

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

при нажатии ссылки, в адрес добавляется /страница#one-modal Если в адресе есть id, то для соответствующего элемента применяется стиль :target. При перезагрузке страницы #id сохраняется, и поэтому окно остается открытым.

Можно открывать и закрывать окно через javascript, не привязываясь к :target

function showModal() {
  let modal = document.getElementById('one-modal');
  modal.classList.add("visible");
}

function hideModal() {
  let modal = document.getElementById('one-modal');
  modal.classList.remove("visible");
}

.modal {
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  transition: all .4s;
}

.modal.visible {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: auto;
  max-width: max-content;
  background: #fff;
  padding: 1em 2em;
  overflow-y: auto;
  height: -webkit-fill-available;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}

<div id="one-modal" class="modal">
  <div class="modal__content">
    <h1>Title</h1>

    <p>
      Content
    </p>

    <div class="modal__footer">
      Footer
    </div>

    <a href="#" class="modal__close" onclick="hideModal()">&times;</a>
  </div>
</div>

<a href="#" onclick="showModal()">
  Кнопка
</a>

БЛОГ НА HUSL

Закрытие модального окна после перезагрузки страницы

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