Хаки и Скрипты Next Generation CMS : Диалоги и lightbox, Интерфейс : Делаем окошко , всплывающее через заданное время

irbees2008 Опубликовано - 1 - сентября Диалоги и lightbox

Адаптировал: 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);
}

Вот и все ,пользуемся .

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

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.