Содержание страницы
домикГлавная / Элементы html и css / Модальное окно при закрытии страницы
Модальное окно при закрытии страницыПродолжая тему всплывающих окон перейдём к последнему примеру и рассмотрим вариант, когда необходимо сделать модальное окно при закрытии страницы.

В основном модальное окно при закрытии страницы делают с одной целью - удержать посетителя на своём сайте, предлагая ему различного характера бесплатных вознаграждений и участие в разных конкурсах. Но как правило, этим не удержишь, и такое внедрение каждый предпринимает самостоятельно.

ПОПРОБУЙТЕ ПОКИНУТЬ ЭТУ СТРАНИЦУ

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

Функционал здесь простой и понятный: когда пользователь ведёт мышкой за верхние пределы контента в браузере, то есть хочет покинуть (закрыть) страницу, то срабатывает функция вызывающая модальное окно.

В этом примере модальное окно появится только один раз, пока пользователь либо не обновит контент, либо не перейдёт на другую страницу, где прописан такой же код всплывающего окна.
ОСОБОЕ ВНИМАНИЕ!
Перейдите к первому уроку модальное окно при нажатии на кнопку и возьмите там практически в самом низу код для всплывающего окна вместе с css оформлением ( код для кнопки брать не нужно ).

А после пропишите ниже код java скрипта:
javaCOPY
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/jаvascript"> $(document).mouseleave(function(e){if (e.clientY < 0) {$("#overlay").css({'visibility':'visible','opacity':'1'});}}); $(function() {$(".close").click(function() { $("#overlay").css({'visibility':'hidden','opacity':'0','transition':'all 0.7s ease-out 0s'}); setTimeout(function () {$('#overlay').remove();}, 3000);});}); </script>
ЕСЛИ у вас на странице уже прописана одна из библиотек JQUERY, то это скрипт прописывать не обязательно:
javaCOPY
<script type="text/jаvascript" src="http://ajax.googleapis.....1.9.0/jquery.min.js"></script>

Некоторое пояснение

  • .css({'visibility' ... - я внедрил анимацию модального окна, которую можно регулировать с помощью параметра transition;
  • .remove();}, 3000 - удаление модального окна через 3 секунды, дав тем самым произвести анимацию при закрытии всплывающего окна, и потом чтобы оно больше не появлялось.

ЕСЛИ ВЫ НЕ ХОТИТЕ ДОНИМАТЬ ПОСЕТИТЕЛЯ

Чтобы не донимать своих посетителей всплывающими окнами, а я вам это советую, то используйте в скрипте куки, с помощью которых можно указать определённое количество дней, через которое будет показываться модальное окно при закрытии страницы для каждого пользователя.
javaCOPY
<script type="text/jаvascript"> function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined;} var alertwin = getCookie("alertwin"); if (alertwin != "no") { $(document).mouseleave(function(e){ if (e.clientY < 0) { $("#overlay").css({'visibility':'visible','opacity':'1'}); var date = new Date; date.setDate(date.getDate() + 1); document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();}}); $(function() {$(".close").click(function() { $("#overlay").css({'visibility':'hidden','opacity':'0','transition':'all 0.7s ease-out 0s'}); setTimeout(function () {$('#overlay').remove();}, 3000);});}); } </script>
date.setDate(date.getDate() + 1); - происходит запись cookie на 1 день, именно столько модальное окно не будет больше показываться пользователю. Цифру меняете на своё усмотрение.
Дата публикации: 25.08.2018
Комментарии
Добавить комментарий
Комментарий не отправлен!
Комментарий успешно отправлен!
После модерации он будет опубликован!
Имя - только русские буквы!
Это обязательное поле!

Вы забыли забрать!

фото бонус

За проявленный интерес к моему проекту хочу Вам приподнести бесплатный подарок в виде Бонуса - эксклюзивные материалы по обучению Java Scripts.

Это DEMO и кнопка соответственно не работает!