• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Всплывающие окно при выходе со страницы (Всплывающее окно, которое появляется на экране при выходе)
Всплывающие окно при выходе со страницы
Kosten
Дата: Среда, 2019-07-31, 19:06 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


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

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

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



Основа окна:

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();
    }
});

Теперь переходим к функциям:

Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.

В этом случае 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

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

Прикрепления: 1127550.png(39.2 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Всплывающие окно при выходе со страницы (Всплывающее окно, которое появляется на экране при выходе)
  • Страница 1 из 1
  • 1
Поиск: