Всплывающее модальное окно при открытии страницы

При открытии любой страницы сайта в течении одной секунды всплывает модальное окно. Текст и кнопки конечно же можно поменять или изменить под дизайн своего сайта или блога. 

Данный скрипт работает так:

• Модальное окно открывается в каждый раз при открытии любой страницы
• Модальное окно открывается один раз в сутки 

Смотреть Пример

Установка модального окна

С начала добавим структуру модального окна. Выше тега </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 &gt;*{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. 

Есть два варианта:

1. Окно будет открываться всегда и в каждый раз
2. Во втором добавим обработчик 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} 

На этом всё !!! Это полностью рабочий скрипт модального окна при открытии страницы.