StillMaster » Веб разработка » CSS » Как сделать автоматически всплывающее окно после загрузки сайта, появляющееся через несколько секунд.

Как сделать автоматически всплывающее окно после загрузки сайта, появляющееся через несколько секунд.
Как сделать автоматически всплывающее окно после загрузки сайта, появляющееся через несколько секунд.

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

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

Итак, для начала мы создадим 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 .


Поделиться:

269 11.03.23