Kosten |
Среда, 31 Июля 2019, 19:06 | Сообщение 1 |
|
В этой статье вы найдете информацию о всплывающих окнах для некоторых популярных браузеров, которое появляется при закрытии или переходи со страницы. Делается это для убеждения ваших гостей и пользователей, что только означает одно, как остаться на вашей странице и превратить их в клиентов с помощью простого трюка. Здесь представлен простым кодом на JavaScript, чтобы это работало корректно. Где идет второе предложение с открытием, но оно зависит от проведенном времени на сайте.
Это вы зашли на страницу с поиска или закладка, и хотите выйти, то вам нужно на браузере сделать некоторые перемещение курсора. Вот как он только появляется на кнопках, как сразу из неоткуда появится модальное окно, а что там написано, то здесь вам решать.
Многим известно, что всплывающие окна считаются раздражающими, где люди ненавидят их. Но в данном случае мы говорим о посетителях, которые уже решили покинуть ваш сайт, так что вам нечего терять, немного ворча. А здесь возможно им предоставится тот материал, который им нужен, что аналогично делается с информацией. А точнее сказать, это крайний шанс, чтоб вы заинтересовали людей остаться на сайте, что безусловно в модальном окне, должно что-то быть весомым, чтоб их заинтересовать.
Основа окна:
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();
}
});
Теперь переходим к функциям:
Если нужно, чтобы окно появлялось только 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 < 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
Обычно вы платите им абонентскую плату, где они предоставляют вам код и интерфейс для разработки вашего всплывающего окна, а также для управления подписками на электронную почту. Здесь как видим все гораздо просто, попадая на сайт вы даже не догадываетесь, что появится окно при выходе со страницы или сайта.
|
| [ RU ] |
|
|
