Открытие модального окна, когда пользователь уходит со страницы. В данной заметке приведен пример скрипта на jQuery, который откроет модальное окно при попытке посетителя покинуть страницу.
Несмотря на то, что данное окошко никак не задержит человека (он без проблем сможет закрыть страницу или переключить вкладку), вывод такого сообщения может негативно сказаться на его мнении о сайте. Поэтому, если уж и применять данный способ на сайте, то только там, где это действительно нужно.
Работает данный способ просто:
Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно.
Пример можно поглядеть на этой странице.
Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).
Установка:
HTML
<div class="exitblock">
<div class="fon"></div>
<div class="modaltext">
Текст, который по вашему мнению должен увидеть посетитель перед уходом. </div>
<div class="closeblock">+</div>
</div>
<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 < 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, '\\$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.
<script crossorigin="anonymous" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
Текст, который по вашему мнению должен увидеть посетитель перед уходом.
+
0 comments