Бесплатное в сети!
» » Модальное окно при закрытии страницы

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

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

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

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

ПОПРОБУЙТЕ ПОКИНУТЬ ЭТУ СТРАНИЦУ и увидите живой пример всплывающего модального окна при закрытии страницы.

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

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

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

А после пропишите ниже код java скрипта:

Код java скрипт для модального окна

<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, то скрипт:

<script type="text/jаvascript" src="http://ajax.googleapis..../1.9.0/jquery.min.js"></script>

прописывать не обязательно.

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

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

ЕСЛИ ВЫ НЕ ХОТИТЕ ДОНИМАТЬ ПОСЕТИТЕЛЯ своими всплывающими окнами, а я вам это советую, то используйте в скрипте куки, с помощью которых можно указать определённое количество дней, через которое будет показываться модальное окно при закрытии страницы для каждого пользователя.

Код java скрипт с COOKIE.

<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 день, именно столько модальное окно не будет больше показываться пользователю. Цифру меняете на своё усмотрение.


Комментарии 0
Добавить комментарий

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

фото бонус

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

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