Как сделать окно для сайта, всплывающее через заданное время?
06.09.2018
Возможно, вы замечали на сайтах, как после захода на веб-страничку через 5-10 секунд появляется всплывающее окно с рекламой либо предложением подписаться на рассылку, получить бесплатно видео урок или книгу, подписаться на группу из социальных сетей.
Если вы не поняли, как этот эффект выглядит в живую, посмотрите демонстрацию:[ посмотреть пример ]
Итак, как такой эффект можно сделать на сайте?
Добавьте после тега <body> вот этот код: <div id="parent_popup"> <div id="popup"> Тут вставляем необходимый html-код на подписку группы в контакте, либо код рекламы и др. <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a></div> </div> <script type="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>В строке №6 можно указать секунды, когда следует появиться всплывающему окну. Сейчас в примере стоит 5000 миллисекунд (они равны 5 секундам ).
Теперь осталось добавить CSS-стиль:
#parent_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: 10% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; 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{ background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -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: rgba(0, 122, 200, 0.8); }Если вы не знаете, как подвязать CSS-стиль к веб странице, рекомендую почитать вот эту коротенькую статью.
Надеюсь, информация этой статьи будет полезна для вас и ваших сайтов!
Всем пока!Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: javascript , Вебмастеру , для сайта , эффекты для сайта