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