Хаки и Скрипты Next Generation CMS

Делаем окошко , всплывающее через заданное время

irbees2008 irbees2008 Опубликовано - 1 - сентября Диалоги и lightbox
1514 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

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

Итак, будем реализовывать такую плюшку на сайте

Добавьте после тега <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>var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>

Сейчас в примере стоит 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);
}
Вот и все ,пользуемся .

Можешь почитать и вот эту статейку "Мультидоменность - выводим статьи только на одном домене"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3458 дней
  • Новостей: 553
  • Комменты: 254
  • Зарегистрированно : 583
  • Онлайн всего: [5]
  • Гости: [4]
  • Поисковики: [1] Яндекс
  • Были сегодня : [1] Яндекс
  • SQL запросов: 29
  • Генерация страницы: 0.314сек
  • Потребление памяти: 5.137 Mb 
  •   яндекс.ћетрика