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

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

Окно с задержкой

Доброго времени суток. 🙂

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

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

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

Способ очень простой и использует маленький 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;
} 

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(14 голосов, в среднем: 5 из 5)

Опубликовано 9 комментариев

  • Alex
    Комментариев: 3

    Спасибо вам за ваш скрипт, очень помогли!
    Только вот помогите сделать так что бы он показывался одному посетителю (IP) не более одного раза в сутки
    И еще у меня почему то на кнопке "закрыть" сам крестик смещен влево((( Уже что только не делал! не могу понять как его в центр кружка поместить?

  • Дмитрий
    Комментариев: 1

    Спасибо, дорогой друг. Выручил.
    С помощью этого скрипта вывожу форму подписки

  • Игорь
    Комментариев: 1

    Здравствуйте, Спасибо большое за скрипт! Хотел еще узнать можно ли сделать так, чтобы он показывался только в определенные часы?

    • Виталий
      Комментариев: 269

      Тогда первый Javascript код будет таким:
      <script>
      setTimeout(function() {
      var d = new Date()
      var time = d.getHours()
      if (time >= 8 && time < 18)
      $("#bg_popup").css("display", "block")}, 5000);
      </script>

      Где начало срабатывания 8 утра а конец 18 вечера - задается в 5 строке.

  • михаил
    Комментариев: 2

    Виталий! Здравствуйте! Прошу прощения за тупой вопрос, только начал осваивать HTML и CSS. HTML разметку и CSS стили, которые вы описали в статье, нужно поместить на одной странице или нужно создать отдельный документ для CSS? Спасибо.

    • Виталий
      Комментариев: 269

      Здравствуйте! HTML добавлять можно где угодно в коде сайта. Например в подвале сайта. CSS добавляется в специальный файл стилей, который должен у вас быть. Чаще всего такой файл называется style.css.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий