Модальное окно при закрытии страницы на Bootstrap

04/08/2020  html, скрипты, Bootstrap, верстка, jQuery

Код модального окна (стандарт modal Bootstrap 4.5), где "exit-popup" — идентификатор вашего попапа при выходе посетителя.


<div class="modal" id="exit-popup" tabindex="-1" role="dialog">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">Modal title</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">×</span>
 </button>
 </div>
 <div class="modal-body">
 <p>Modal body text goes here.</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
</div>

Включаем функции.


<script>
 // Вызываем окно, если курсор мыши вышел за границы страницы
$(document).mouseleave(function(e){
 if (e.clientY < 0) {
 $("#exit-popup").modal('show');
 } 
});
// Если окно закрыли, то удаляем его, чтобы оно больше не открывалось
$('#exit-popup').on('hidden.bs.modal', function () {
 $("#exit-popup").remove();
});
</script>

Настройка размера и расположения всплывающего модального окна — по вкусу.

Не забудьте про подключение библиотеки jQuery и js-файла Bootstrap локально или через CDN.


<!-- Опционально -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Источники
https://getbootstrap.com/docs/4.5/components/modal/
https://it-blog.ru/js/sozdanie-stop-formy-dlya-sajta/

 

Апсолямов Михаил
Автор — Михаил Апсолямов
Создаю и продвигаю сайты с 2010 года. Провожу аудиты, настраиваю контекстную рекламу. Подробнее об услугах.
наверх