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

1 января, 20212 января, 2021 my-mails.ru

Код вывода модального окна при закрытии вкладки

В данной статье мы рассмотрим как создать всплывающее окно подписки при закрытии пользователем Вашего сайта (вкладки) без плагинов.

Статья и код не наши. Оригинал статьи

Поддержка кода проектом не осуществляется. Если Вам потребуется модификация — закажите изменение у правообладателя на странице статьи или по контактам

Тестирование кода: (успешно) 02.01.2021 WP 5.3.6 с темой оформления ColorMag

Пример:

О том как создать форму обратной связи в своем личном кабинете MailWizz >>>

Код всплывающей формы при закрытии вкладки

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

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

$(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

Спойлер

// функция возвращает cookie с именем name, если есть, если нет, то undefined    
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
    ));
    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();
        }
    });  
}

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

Спойлер

function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
    ));
    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();
        }
    });  
}

Если необходимо показать пользователю нашу форму через 10 секунд прибывания на сайте.

Спойлер

<script>
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\\') + "=([^;]*)"
    ));
    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").fadeIn("fast");     
        }
        writeCookie(); 
// Устанавливаем куку через 15 секунд, видел ли или нет посетитель всплывающее окно
    }, 10000);        
    $(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();
        }
    });  
}
</script>

Легкая установка на блог wordpress

Для внедрения кода мы будем использовать плагин Insert Headers and Footers, установить его Вы можете с официального репозитория.

Плагин используем для того что бы обычный пользователь не имеющий базовых знаний программирования смог установит на свой блог. Если же Вы уже опытный блогер — рекомендуем внедрять код в файлы (лишние плагины — лишние проблемы)

После установки плагина — найти его моно в Настройках админки Вашего блога.

В секцию Scripts in Header загрузите код плагина с Вашей формой.

Обьедененный код для вставки в Insert Headers and Footers

/// подключаем jquery
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

/// подключаем script
<script>
$(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();
    }
});
</script>

// Разметка нашего модального окна
<div class="exitblock">
    <div class="fon"></div>    
    <div class="modaltext">    
................................
................................ 
iframe или html Вашей формы подписки
................................   
................................   
    </div>
    <div class="closeblock">+</div>
</div>

/// подключаем стили css
<style>
.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;    
}
</style>