ZorNet.Ru — сайт для вебмастера » HTML и CSS » Всплывающее окно при закрытие страницы на JS

Всплывающее окно при закрытие страницы на JS

Всплывающее окно при закрытие страницы на JS
Данный скрипт работает на jQuery, где отвечает за функцию появление модального окна с данными, если решите закрыть страницу на этом сайте. Сама работа заключается в том, что вы заходите на материал, где сразу решили выходить, это наводите на функционал браузера, здесь подчеркиваю, на самом браузере. Это может выйти на главную или предыдущими страницами. Но здесь сразу появляется окно, где сам веб мастер может написать, то что ему нужно. Или поставить ссылки на другие категорий, но все сделать, чтоб гости или пользователи, остались на интернет площадке.

Но дело в том, что только один раз будет срабатывать, так как с окном в правом ввернем углу появится функция на отключение, что будет заметен визуально. Если рассмотреть, то это окно безусловно не будет задерживать, кто зашел на блог или ресурс, так как кому нужно тот выйти, здесь не сложно будет закрыть или покинуть заданную страницу, также с применением переключение вкладки. Что также нужно понимать, где все может вылиться в негативную сторону и скажется на сайте, а точнее вообще не будут посещать. Так что устанавливаем, там где вам реально нужно, чтоб задействована в наличие этой функциональности не более одной страницы.

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

Приступаем к установке:

HTML

Код
<div class="exitblock">
  <div class="fon"></div>  
  <div class="modaltext">  
  Текст, который по вашему мнению должен увидеть посетитель перед уходом.
  </div>
  <div class="closeblock">+</div>
</div>

CSS

Код
.exitblock {  
  display:none;  
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:100000;
}  
.exitblock .fon {
  background: #F6FCFF;
  opacity:.8;
  position:fixed;
  width:100%;
  height:100%;
}
.exitblock .modaltext {
  box-sizing: border-box;  
  padding:20px 40px;
  border: 2px solid #AEAEAE;
  background: #F6FCFF;
  position:fixed;
  top:80px;
  left:50%;
  margin-left:-30%;
  width:60%;
  box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}  
.closeblock {
  cursor:pointer;
  position: fixed;
  line-height:60px;
  font-size:82px;
  transform: rotate(45deg);
  text-align:center;
  top:20px;
  right:30px;
  color: #337AB7;  
}
.closeblock:hover {
  color: #000;  
}

JS

Код
$(document).mouseleave(function(e){
  if (e.clientY < 10) {
  $(".exitblock").fadeIn("fast");
  }  
});
$(document).click(function(e) {
  if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
  $(".exitblock").remove();
  }
});

Чтоб появление было один раз, то на сайте используем cookie.

В нашем случае JS выставляем так:

JS

Код
// функция возвращает cookie с именем name, если есть, если нет, то undefined  
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
  "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ
var alertwin = getCookie("alertwin");
if (alertwin != "no") {  
  $(document).mouseleave(function(e){
  if (e.clientY < 0) {
  $(".exitblock").fadeIn("fast");  
  // записываем cookie на 1 день, с которой мы не показываем окно
  var date = new Date;
  date.setDate(date.getDate() + 1);  
  document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();  
  }  
  });
  $(document).click(function(e) {
  if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
  $(".exitblock").remove();
  }
  });  
}

Есть еще один вариант, где мы не показываем всплывающее или модальное окно, если посетитель провел на сайте определенное время.

JS

Код
function getCookie(name) {
  var matches = document.cookie.match(new RegExp(
  "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}
function writeCookie() {
// функция записывает cookie на 1 день, с которой мы не показываем окно
  var date = new Date;
  date.setDate(date.getDate() + 1);  
  document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();  
}  
// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ
var alertwin = getCookie("alertwin");
if (alertwin != "no") {
  window.setTimeout(function() { // запускаем таймер на 15 секунд
  if ($(".exitblock").is(':hidden')) { // если блок не показывается, то убираем его навсегда
  $(".exitblock").remove();  
  }
  writeCookie();  
// Устанавливаем куку через 15 секунд, видел ли или нет посетитель всплывающее окно
  }, 15000);  
  $(document).mouseleave(function(e){
  if (e.clientY < 0) {
  $(".exitblock").fadeIn("fast");  
  writeCookie();  
// Устанавливаем куку когда посетитель увидел окно, даже если не прошло 15 секунд
  }  
  });
  $(document).click(function(e) {
  if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
  $(".exitblock").remove();
  }
  });  
}

Чтоб все корректно работало, то не забываем, что на сайте обязательно должна быть подключена библиотека jQuery.

Источник: Atuin.ru
18 Августа 2018 Просмотров: 4001 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
-SAM-
-SAM- 19 Августа 2018 04:141
+1
Довольно расплывчатое объяснение когда срабатывает функция, нежели на сайте-источнике. Вот оттуда цитата: "Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно." © atuin. Какое делать уведомление - это уже пользователю решать. Было представлено два варианта внешнего вида - один здесь, другой вот здесь. В обоих случаях - функция одна и та же на JS, к которой привязали... в опубликованном здесь материале идёт подключенный cookie (чтобы не напрягало каждый раз, когда курсор отвёл, при этом же не собирался закрывать страницу... ну вот, для уведомления при непосредственном закрытии страницы, то бишь вкладки браузера - есть еще варианты скрипта в сети).
avatar