Всплывающее окно при закрытие страницы на JS
 | |
| Данный скрипт работает на jQuery, где отвечает за функцию появление модального окна с данными, если решите закрыть страницу на этом сайте. Сама работа заключается в том, что вы заходите на материал, где сразу решили выходить, это наводите на функционал браузера, здесь подчеркиваю, на самом браузере. Это может выйти на главную или предыдущими страницами. Но здесь сразу появляется окно, где сам веб мастер может написать, то что ему нужно. Или поставить ссылки на другие категорий, но все сделать, чтоб гости или пользователи, остались на интернет площадке. Но дело в том, что только один раз будет срабатывать, так как с окном в правом ввернем углу появится функция на отключение, что будет заметен визуально. Если рассмотреть, то это окно безусловно не будет задерживать, кто зашел на блог или ресурс, так как кому нужно тот выйти, здесь не сложно будет закрыть или покинуть заданную страницу, также с применением переключение вкладки. Что также нужно понимать, где все может вылиться в негативную сторону и скажется на сайте, а точнее вообще не будут посещать. Так что устанавливаем, там где вам реально нужно, чтоб задействована в наличие этой функциональности не более одной страницы. Где стоит один раз переключить и больше это окно вам не будет мешать. Но вы только обновите страницу, так как оно в аналогичном способе появится. Это можно сделать на всем интернет ресурсе. Что некоторые так создают, где пользователь больше путается, и мечтает быстрей покинуть сайт. В таком случай здесь нужно подходить тонко, а точнее создавать преференцию той странице, где есть ваш материал, где вы хотите, чтоб с ним как можно больше ознакомились. Приступаем к установке: 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; } 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(); } }); Чтоб появление было один раз, то на сайте используем cookie. В нашем случае JS выставляем так: 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 < 0) { $(".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(); } }); } Есть еще один вариант, где мы не показываем всплывающее или модальное окно, если посетитель провел на сайте определенное время. JS Код 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. Источник: Atuin.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
