Возможно, вы замечали на сайтах, как после захода на веб-страничку через 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 ENGINE="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
Как добавить социальные кнопки на сайт
Скрипт сколько дней я не курю или не пью. Счетчик на javascript
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331671 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275610 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226703 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193200 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187094
12 Ответов на комментарий - Как сделать окно для сайта, всплывающее через заданное время?
Добавить комментарий
Метки: javascript, Вебмастеру, для сайта, эффекты для сайта
Спасибо за информацию. Меня, как читателя раздражает когда на сайте появляется такое всплывающее окно.
А еще больше раздражает, когда на некоторых сайтах при закрытии страницы выскакивает надпись, сопровождающееся голосом «Уже уходите?…» и т.д
Наверное это оправдано для увеличения подписки, но я пока для себя решила не делать это на своем блоге
кстати да, такие всплывающие окна я сразу же захлапываю на сайтах, куда захожу, без прочтения. вроде прикольная фишечка, но, действительно, раздражает. да и поисковики к таким прикольчикам, вроде как, не очень хорошо относятся.
Я согласен с Натальей, это довольно сильно раздражает, но это не главное — подобное окно довольно сильно замедляет время загрузки сайта. Поэтому, подумайте несколько раз перед установкой.
Совсем не правда что данное окно, показаное в статье замедляет загрузку сайта, поскольку оно сделано на чистом CSS и скрипт только один и то для появления окна по времени. Вот если использовать всплывающее окно от FancyBOX, о оно действительно немного замедляет загрузку страницы. А чтоб такое окно не появлялось каждый раз при переходе на страницах сайта, нужно привязать к нему куки и указать через какое время показывать окно. Можно поставить и на сутки и более. Человек зашел, увидел окно, закрыл и все, в течении определенного времени оно не будет всплывать при переходе по страницам и раздражать
спасибо поставлю у себя на сайте.может что и дельное выйдет
Здравствуйте! Но у меня почему-то надпись (Тут вставляем необходимый html-код на подписку группы в контакте, либо код рекламы и др.) появляется сразу без стиля, стиль не вкакую не хочет подключаться, хоть и скопирован в общий файл .css
Забыл упамянуть, что и выставление времени появления модального окна никак не влияет, при загрузки страницы появляется сразу.
Здравствуйте!
Почистите кеш браузера и сразу увидите изменения.
Или же не подключены стили CSS
Какое время в указали?
Дайте посмотреть на страничку. Так я ничего не могу сказать, пока не увижу.
Спасибо! Чистка кэша помогла!
А как сделать показ окна через 10 сек. после загрузки страницы и показ окна привязать к cookie браузера, время жизни — 3 дня ???