0

У меня есть скрипт который при наведении курсором на вне страницы, выкидывает модальное окно. Если один раз закрыть, модал больше не появится, но если обновить страницу оно будет появляться опять. Как сделать что бы этот модал открывалось один раз?

<div class="modal bd-example-modal-lg fade" id="exit-popup" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="border-bottom: none;">
        <h5 class="modal-title" id="exampleModalLongTitle"> </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
   текст
      </div>

    </div>
  </div>
</div>

js код

 // Вызываем окно, если курсор мыши вышел за границы страницы
 
jQuery(document).mouseleave(function(e){
 if (e.clientY < 0) {
jQuery("#exit-popup").modal('show');
 } 
});
// Если окно закрыли, то удаляем его, чтобы оно больше не открывалось
jQuery('#exit-popup').on('hidden.bs.modal', function () {
jQuery("#exit-popup").remove();
});
 
1
  • в localStorage запишите, что больше не надо открывать, и проверяйте потом, когда захочется открыть вновь
    – teran
    Commented 9 сент. 2021 в 9:58

1 ответ 1

0

Для данных целей, если какое-то взаимодействие с бэкэндом особо не нужно, нет смысла использовать куки. Сохраните состояние в локальном хранилище на клиенте. При закрытии окна запишите туда что-либо вроде

localStorage.setItem('ignoreExit', 1);

а в код, открывающий окно, добавьте дополнительную проверку а-ля

let ignore = localStorage.getItem('ignoreExit');
if(ignore) return;
.... //show
3
  • если бы я разбирался еще в этом было бы вообще супер.
    – AndSol
    Commented 9 сент. 2021 в 10:17
  • @AndSol первый фрагмент добавьте перед remove, второй перед modal show
    – teran
    Commented 9 сент. 2021 в 10:18
  • Это штатный bootstrap
    – AndSol
    Commented 9 сент. 2021 в 10:19

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.