Всплывающее модальное окно при загрузке сайта с задержкой

С одной стороны, такие окна иногда напрягают посетителей, но с другой стороны иначе. Они не плохо выполняют свою работу. Если Вы таким способом привлекаете людей в группу, то приток подписчиков явно увеличиться. Может при первом заходе человек и закроет окно, отклонив предложение, но если Ваш сайт и информация на нем интересна ему, то с большой вероятностью он все таки вступит в группу, если Вы активно ее ведете, чтобы следить за новостями.

В этой статье хочу Вам рассказать как раз о способе, как можно организовать такое всплывающее окно. Если вставить код окна только на главной, то окно будет появляться, на главной, когда ее посещают посетители. Если разместить в подвале или шапке, то окно будет всплывать на любой странице сайта. К сожалению данный способ не использует куки, так что оно будет появляться с задержкой каждый раз для всех.

Способ очень простой и использует маленький javascript код, который выводит блок с задержкой. Что же, приступим.

1. Javascript.

Первым делом нам надо установить скрипт, который и совершает вывод. Для этого нужно вставить его или в подвал или в шапку Вашего сайта. Сам скрипт выглядит так.

<script type="text/javascript">
    var delay_popup = 5000;
    setTimeout("document.getElementById('bg_popup').style.display='block'", delay_popup);
</script>  

Скрипт просто придает свойство display:block; окну, которому мы в стилях пропишем свойство display:none;. Во второй строке видно значение 5000. Это значение в миллисекундах и равно 5 секундам. Это время через которое появится окно, так что меняйте его на число побольше или поменьше, по надобности. С скриптом понятно, дальше само окно.

1. Html разметка.

Окно будет появляться по центру экрана, а весь остальной контент будет затемнятся. Для этого мы создадим основной блок с id bg_popup, который займет всю ширину и высоту экрана и затемнит основное содержимое. К тому же он будет именно тем блоком с которым работает скрипт. Внутри этого блока разместим блок с id popup, который как раз и будет окном.

.

Далее внутрь можно добавить все что нужно. Чтобы иметь возможность закрыть окно, так же советую добавить обязательную кнопку, в которой прописан параметр onclick, что возвращает нашему окну свойство display:none; и оно исчезает.

<div id="bg_popup">
  <div id="popup">
<h1>Заголовок</h1>
<p>Пример модального окна, всплывающего при загрузке сайта.</p>
<a class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;">X</a>
</div>
</div>  

1. CSS стили.

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

#bg_popup{
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
 
#popup {
background: #fff;
width: 520px;
margin: 25% auto;
padding: 5px 20px 13px 20px;
border: 2px solid #1BA600;
position: relative;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
 
.close{
display:block;
position:absolute;
top:-12px;
right:5px;
width:25px;
height:25px;
line-height:28px;
color:#fff;
background:#1BA600;
cursor:pointer;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color:#f30;
} 

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

На этом все, спасибо за внимание. 🙂