Подключение к сайту и настройка показа всплывающего окна при закрытии страницы

 

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

В данной статье рассмотрим подключение и настройку таких модальных окон на примере этого сайта.

Делать это лучше всего при помощи сниппетов. Для этого при написании этой статьи был взят плагин Header Footer Code Manager (HFCM) для WordPress.

Создаём сниппет со следующими параметрами:

  • Location — Header
  • Devices — Only Desktop
  • Site Display — Site Wide (если модальное окно должно работать на всём сайте)

Также можно выставить более точные параметры.

Подключаем jQuery и добавляем CSS стили:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">
.exitblock {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitblock .modalbackground {
    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>

Жмём Update

После этого создаём сниппет с такими же параметрами, только в параметре Location выбираем Footer

 

Добавляем HTML код и сразу после него — скрипт появления всплывающего окна

<!-- содержание блока -->
<!-- exit modal window - html-code -->
<div class="exitblock">
    <div class="modalbackground"></div>    
    <div class="modaltext">    
        <p class="entry-title">Не нашли того, что нужно?</p>
        <hr class="entry-title">
        <p>Воспользуйтесь <b><a href="/sitemap/">картой сайта</a></b> или поисковой формой. Здесь много интересного материала</p>
        <p>   </p>
        <p>   </p>
    </div>
    <div class="closeblock">+</div>
</div>
<!-- exit modal window - JavaScript -->
<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>
<!-- end exit modal window -->

Готово!

Теперь проверяем

переходим на сайт и убираем курсор мышки из окна сайта:

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

// функция возвращает 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 rbmodalwin = getCookie("rbmodalwin");
if (rbmodalwin != "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 = "rbmodalwin=no; path=/; expires=" + date.toUTCString();       
        }    
    });
    $(document).click(function(e) {
        if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
            $(".exitblock").remove();
        }
    });  
}

Не показываем всплывающее окно в скрипте, если посетитель провел на сайте 60 секунд:

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 = "rbmodalwin=no; path=/; expires=" + date.toUTCString();		
}	
// проверяем, есть ли у нас cookie, с которой мы не показываем окно и если нет, запускаем показ
var rbmodalwin = getCookie("rbmodalwin");
if (rbmodalwin != "no") {
	window.setTimeout(function() { // запускаем таймер на 60 секунд
		if ($(".exitblock").is(':hidden')) { // если блок не показывается, то убираем его навсегда
			$(".exitblock").remove(); 	
		}
		writeCookie(); 
// Устанавливаем куку через 60 секунд, видел ли или нет посетитель всплывающее окно
	}, 60000);		
	$(document).mouseleave(function(e){
		if (e.clientY < 0) {
			$(".exitblock").fadeIn("fast");	  
			writeCookie(); 
// Устанавливаем куку когда посетитель увидел окно, даже если не прошло 60 секунд
		}    
	});
	$(document).click(function(e) {
		if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
			$(".exitblock").remove();
		}
	});  
}

Источник: при написании поста были использованы скрипты и стили отсюда: https://atuin.ru/blog/vsplyvayushhee-okno-pri-zakrytii-stranicy/

P.S.: на этом посте можно посмотреть пример работы появления модального окна при попытке закрыть эту страницу (или вкладку).

Поделиться ссылкой:

 

Читайте также