Работая над одним из своих сайтов, я задался вопросом, а как сделать всплывающее окно с рекламой или другой информацией, так чтобы оно появлялось спустя некоторое время после загрузки сайта. И я нашел решение и делюсь с вами.

Чтоб показать пример я использую свой сайт в котором я использовал это решение. Но сделал я это только для ПК, так как мне не нужен мобильный трафик.

Итак, для начала мы создадим HTML, в котором можно разместить все что угодно.

<div id="overlay">
            <div class="popup">
                <button class="closeover" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';">&times;</button>
Здесь размещается код и оформление которое вам нужно
                
            </div>
        </div>

Но все это будет отображаться у вас на экране, поэтому с помощью CSS мы зададим стили нашего всплывающего окна и скроем его от пользователей.

/* Всплывающее окно 
* при загрузке сайта            
*/
/* базовый контейнер, фон затемнения*/
#overlay {margin: auto;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;display: none;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.65);z-index: 999;-webkit-animation: fade .6s;-moz-animation: fade .6s;animation: fade .6s;
  overflow: hidden;}
.popup {font-size: 14px;margin: auto;position: absolute;
    z-index: 1000;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px; border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}
.closeover {color: #aaa;font-size: 50px;font-weight: bold; position: absolute;left: 96%; cursor: pointer;}
.popup button {background: none;border: none;}
.closeover:hover {color: red;}
@-moz-keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }
}
@-webkit-keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 } 
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1 }
}

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

<script type="text/jаvascript">
     {      
        var delay_popup = 5000;
        setTimeout("document.getElementById('overlay').style.display='flex'", delay_popup);     
    };
    </script>

Если вам нужно чтобы окно появлялось через 10 секунд цифру 5000, нужно поменять на 10000. Вот в принципе и все. Будут вопросы пишите в комментариях. А чтобы увидеть как это работает перейдите на мой сайт Отзывы о кино и через 5 секунд появится рекламное окошко. Но только переходить нужно с ПК.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .