Всплывающее окно подписки для сайта при закрытии страницы
Код вывода модального окна при закрытии вкладки
В данной статье мы рассмотрим как создать всплывающее окно подписки при закрытии пользователем Вашего сайта (вкладки) без плагинов.
Статья и код не наши. Оригинал статьи
Поддержка кода проектом не осуществляется. Если Вам потребуется модификация — закажите изменение у правообладателя на странице статьи или по контактам
Тестирование кода: (успешно) 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>