BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Как сделать окно для сайта, всплывающее через заданное время?

Как сделать окно для сайта, всплывающее через заданное время?

2015-08-26 / Вр:23:33 / просмотров: 14054

Как сделать окно для сайта, всплывающее через заданное время?

Возможно, вы замечали на сайтах, как после захода на веб-страничку через 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-стиль к веб странице, рекомендую почитать вот эту коротенькую статью.

Надеюсь, информация этой статьи будет полезна для вас и ваших сайтов!
Всем пока!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

12 Ответов на комментарий - Как сделать окно для сайта, всплывающее через заданное время?

  1. Наталья

    Спасибо за информацию. Меня, как читателя раздражает когда на сайте появляется такое всплывающее окно.
    А еще больше раздражает, когда на некоторых сайтах при закрытии страницы выскакивает надпись, сопровождающееся голосом “Уже уходите?…” и т.д
    Наверное это оправдано для увеличения подписки, но я пока для себя решила не делать это на своем блоге

  2. Avatar photo Степан => автор блога

    :) Меня тоже это раздражает! Но решил написать статью, как это делаеть. Может кто-то придумает более правильное применение этому эффекту.

  3. artem

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

  4. Андрей Зимин

    Я согласен с Натальей, это довольно сильно раздражает, но это не главное – подобное окно довольно сильно замедляет время загрузки сайта. Поэтому, подумайте несколько раз перед установкой.

  5. Александр

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

  6. Аноним

    спасибо поставлю у себя на сайте.может что и дельное выйдет

  7. Enclave

    Здравствуйте! Но у меня почему-то надпись (Тут вставляем необходимый html-код на подписку группы в контакте, либо код рекламы и др.) появляется сразу без стиля, стиль не вкакую не хочет подключаться, хоть и скопирован в общий файл .css

  8. Enclave

    Забыл упамянуть, что и выставление времени появления модального окна никак не влияет, при загрузки страницы появляется сразу.

  9. Avatar photo Степан => автор блога

    Здравствуйте!
    Почистите кеш браузера и сразу увидите изменения.
    Или же не подключены стили CSS

  10. Avatar photo Степан => автор блога

    Какое время в указали?
    Дайте посмотреть на страничку. Так я ничего не могу сказать, пока не увижу.

  11. Enclave

    Спасибо! Чистка кэша помогла! :mrgreen:

  12. РФ

    А как сделать показ окна через 10 сек. после загрузки страницы и показ окна привязать к cookie браузера, время жизни – 3 дня ???

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716