Как сделать всплывающее окно при закрытии страницы | How to make a popup when closing a page

Вы узнаете как создать открытие модального окна, когда пользователь уходит со страницы. В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.

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

Работает данный способ просто: Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.

Пример можно поглядеть на этой странице.

Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).

Текст, который по вашему мнению должен увидеть посетитель перед уходом.

+

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

Не забудьте, что на сайте должна быть подключена библиотека jQuery:

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>

JAVASCRIPT КОД:

$(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 < 10) {
            $(".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();
        }
    });  
}

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

JAVASCRIPT КОД:

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