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

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

irbees2008 irbees2008 Опубликовано - 1 - сентября Диалоги и lightbox
2539 - 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);
}
Вот и все ,пользуемся .

Можешь почитать и вот эту статейку "Выводим название категории через TWIG но не через news.table.tpl"

Опрос

Ваше мнение

Как вам наш дизайн сайта?
Результаты

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

Теги

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

Статистика

  • Caйту: 4489 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.794сек
  • Потребление памяти: 6.114 Mb 
  •   Яндекс.Метрика