Несмотря на то, что данное окошко никак не задержит человека (он без проблем сможет закрыть страницу или переключить вкладку), вывод такого сообщения может негативно сказаться на его мнении о сайте. Поэтому, если уж и применять данный способ на сайте, то только там, где это действительно нужно.
Работает данный способ просто:
Как только мышка вылезла вверх к адресной строке, вкладкам и кнопке закрытия страницы – открывается модальное окно. Пример можно увидеть на этой странице.
Скрипт сделан таким образом, что на одной странице окно появится только 1 раз (при обновлении страницы или на любой другой, где он подключен, окно появится снова).
Установка всплывающего окна:
Для работы «всплывающего окна» понадобится подключенная библиотека jQuery. Как вы помните, подключить её можно напрямую с серверов Google:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
Шаг 1) добавить HTML:
<div class='mod-up modal-hidden' id='antiModBlock'>
<div class='modal-up'>
<div class='anti-content'>
<h2><b>Система <font style='color:red;'>Самовар 2023</font></b></h2>
<p> Доступ разрешен исключительно для лиц старше 18 лет или достигших установленного законом возраста в вашей юрисдикции, в зависимости от того, что больше.</p>
</div>
<div class='pop-btn-box'>
<div class='pop-btn'>
<a class='btn-pop-blue' href='#' id='modal-close' rel='nofollow' target='_blank'>Да</a>
</div>
<div class='pop-btn'>
<a class='btn-pop-red' href='#close'>Нет</a>
</div>
</div>
</div>
<div class="closeblock">+</div>
</div>
Шаг 2) добавить CSS:
.mod-up{position:fixed;top:0;bottom:0;left:0;right:0;padding:20px;background:rgba(255, 255, 255, 0.1);z-index:99999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center}
.mod-up.modal-hidden{display:none;}
.mod-up .modal-up{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:1100px;/*display:flex;justify-content:center;align-items:center;flex-direction:column; */padding:30px;border-radius:20px;box-shadow:0 5px 25px rgb(0 0 0 / 20%);margin:0 auto;margin-top:50px;}
.mod-up .modal-up svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.mod-up .modal-up h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.mod-up .modal-up p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b;max-width:600px;}
.mod-up{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.mod-up >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.drK .mod-up{background:rgba(0, 0, 0, 0.1)}
.drK .mod-up .modal-up{background:rgba(50, 50, 50, 0.8)}
.drK .mod-up .modal-up svg{stroke:#fefefe}
.drK .mod-up .modal-up p, .drK .mod-up .modal-up h2{color:#fefefe}
@keyframes popupBlur {from{opacity:0}to{opacity:1}}
@-webkit-keyframes popupBlur{from{opacity:0}to{opacity:1}}
@keyframes popupScale{from{transform:scale(0);animation-timing-function:ease-in;opacity:0}to{transform:scale(1);opacity:1}}
@-webkit-keyframes popupScale{from{-webkit-transform:scale(0);-webkit-animation-timing-function: ease-in;opacity:0}to{-webkit-transform:scale(1);opacity:1}}
.pop-btn-box {display: flex;justify-content: center;column-gap:10px;padding-top:20px;}
.btn-pop-blue {font-weight: 700;padding:5px 20px;border:2px solid blue;border-radius:15px;display:inline-block;background-color:blue;color:#fff;transition: 0.35s ease-in-out;}
.btn-pop-red {font-weight: 700;padding:5px 20px;border:2px solid red;border-radius:15px;display:inline-block;background-color:red;color:#fff;transition: 0.35s ease-in-out;}
.btn-pop-blue:hover {border:2px solid blue;background-color:#fff;box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);}
.btn-pop-red:hover {border:2px solid red;background-color:#fff;box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);}
.modal-18{background-color:red;color:#fff;font-size:25px;font-weight:700;border-radius: 50%;padding: 18px 10px;}
.closeblock {cursor: pointer;position:absolute;line-height: 60px;font-size: 30px;transform: rotate(45deg);text-align: center;top: 60px;right: 260px;color: #337AB7;}
.closeblock:hover {color: #000;}
Шаг 3) добавить JavaScript:
<script type='text/javascript'>
$(document).mouseleave(function(e){
if (e.clientY < 10) {
$(".mod-up").fadeIn("fast");
}
});
$(document).click(function(e) {
if (($(".mod-up").is(':visible')) && (!$(e.target).closest(".mod-up .modal-up").length)) {
$(".mod-up").remove();
}
});
</script>
Если нужно, чтобы окно появлялось только 1 раз на всем сайте, используем cookie.
В этом случае JS нужно поставить такой:
<script type='text/javascript'>
// функция возвращает 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) {
$(".mod-up").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 (($(".mod-up").is(':visible')) && (!$(e.target).closest(".mod-up .modal-up").length)) {
$(".mod-up").remove();
}
});
}
</script>
Отправить комментарий
0 Комментарии