Данный скрипт работает так:
- Модальное окно открывается в каждый раз при открытии любой страницы
- Модальное окно открывается один раз в сутки
Установка модального окна
С начала добавим структуру модального окна. Выше тега </body> добавьте ниже показанный код модального окна.
HTML
<div class='anti-mod modal-hidden' id='antiModBlock'>
<div class='anti-modal'>
<div class='modal-18'>18+</div>
<div class='anti-content'>
<h2><b>Это сайт только <font style='color:red;'>для взрослых!</font></b></h2>
<p> Доступ разрешен исключительно для лиц старше 18 лет или достигших установленного законом возраста в вашей юрисдикции, в зависимости от того, что больше.</p>
</div>
<div class='pop-btn-box'>
<div class='pop-btn'>
<a class='btn-pop-blue' href='#close' id='modal-close'>Да</a>
</div>
<div class='pop-btn'>
<a class='btn-pop-red' href='https://streamsb.com/join/64757.html' rel='nofollow' target='_blank'>Нет</a>
</div>
</div>
</div>
</div>{codeBox}
Теперь добавим стили для модального окна. Для Blogger добавьте выше тега ]]></b:skin> ниже показанный CSS код стилей модального окна. А на простых сайтах просто закиньте в файл стиля для сайт. Или если не знаете как, то просто добавьте перед тегом </body>. Но заверните в теги стиля <style> код </style>
CSS
/* Pop-Up Box (Style 2) by TechAndFunZone */
.anti-mod{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}
.anti-mod.modal-hidden{display:none}
.anti-mod .anti-modal{position:relative;background:rgba(255, 255, 255, 0.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:800px;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;}
.anti-mod .anti-modal svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.anti-mod .anti-modal h2{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.anti-mod .anti-modal p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b;max-width:600px;}
.anti-mod{animation:popupBlur .3s ease-in; -webkit-animation:popupBlur .3s}
.anti-mod >*{animation:popupScale .3s ease-in; -webkit-animation:popupScale .3s}
.drK .anti-mod{background:rgba(0, 0, 0, 0.1)}
.drK .anti-mod .anti-modal{background:rgba(50, 50, 50, 0.8)}
.drK .anti-mod .anti-modal svg{stroke:#fefefe}
.drK .anti-mod .anti-modal p, .drK .anti-mod .anti-modal 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;}
.pop-btn {}
.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;}
.anti-content{}
.anti-content h2{text-align:center;}
.anti-content p{text-align:center;}{codeBox}
И последнее что осталось добавить это JavaScript.
Есть два варианта:
- Окно будет открываться всегда и в каждый раз
- Во втором добавим обработчик cookie, и будет открываться один раз в сутки
Первый вариант JavaScript
<script type='text/javascript'>
setTimeout(function(){
modalwin = document.getElementById('antiModBlock');
modalwin.style.display="block";
document.getElementById("modal-close").addEventListener("click", function(){
modalwin.style.display="none";
});
}, 1000);
</script>{codeBox}
Второй вариант JavaScript:
<script type='text/javascript'>
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
let mcookie = getCookie("mcookie");
if (mcookie != "no") {
setTimeout(function(){
modalwin = document.getElementById('antiModBlock');
modalwin.style.display="block";
document.getElementById("modal-close").addEventListener("click", function(){
modalwin.style.display="none";
// записываем cookie на 1 день, с которой мы не показываем окно
let date = new Date;
date.setDate(date.getDate() + 1);
document.cookie = "mcookie=no; path=/; expires=" + date.toUTCString();
});
}, 1000);
}
</script> {codeBox}
На этом всё !!! Это полностью рабочий скрипт модального окна при открытии страницы.