Главная » Уроки » Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

Создаем всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

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

 
Всплывающее окно при загрузке сайта
 

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

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

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к javascript и формирования внешнего вида с помощью стилей CSS. Элемент <div id="overlay"> отвечает за позиционирование, цвет фона, прозрачность и степень его затемнения при запуске всплывающего окна. Внутри контейнера <div class="popup"> будет размещаться само содержание модального окна. Также нам нужно организовать ссылку для закрытия окна. Для наглядного примера разместим простой заголовок и парочку параграфов текстового содержания. В итоге мы получим полную разметку нашего окна примерно такого вида:
 

<!-- Модальное Окно  -->
<div id="overlay">
    <div class="popup">
        <h2>Модальное Окно!</h2>
        <p>
            Ширина модального окна задана в процентах, в зависимости от ширины родительского контейнера, в данном примере это фон затемнения. 
         </p>
         <div class="pl-left">
               <img src="http://lorempixel.com/320/320/people/some-text">
         </div>
         <p>Предусмотрена возможность использования встроенных миниатюр, расположенных слева или справа, в отдельном div-контейнере с выделенным классом .pl-left и .pl-right соответственно.</p>
         <div class="pl-right">
               <img src="http://lorempixel.com/320/320/people/some-text">
         </div>              
<p>Размер блока миниатюр так же определил в процентной записи (25%), тем самым обеспечив возможность пропорционального изменения, при просмотре на экранах различных пользовательских устройств.</p>
       <p>
           Простейшая анимация появления с помощью изменения свойства прозрачности (opacity) от 0 к 1
       </p>
        <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
    </div>
</div>

 
Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой javascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот javascript лучше всего в конце тела страницы html перед закрывающим тегом </body>. Ну а сам скрипт состоит всего лишь из нескольких строк:
 

<script type="text/javascript">
	var delay_popup = 5000;
	setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
</script>

 
В примере время появления окна выставлено в 5000, что соответствует примерно 5 секундам, вы можете прописать любое другое значение.

Для закрытия окна мы просто используем стандартную кнопку, тег <button> с onclick событием и определенным классом class="close", для возможности оформления внешнего вида через стили CSS.
 

<button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>

 
Таким образом мы подошли к самому интересному моменту(на мой взгляд), к формированию стилей всплывающего окна.

Стили CSS

Для начала, создадим идентификатор #overlay с помощью которого мы свяжем наше окно с javascript и сформируем базовый контейнер <div id="overlay" для всплывающего окна.

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 999;
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
    overflow: auto;
}

Для основы нашего окна выставляем фиксированное положение position: fixed;, то есть, если вы будете прокручивать страницу при открытом окне, оно остаётся на месте. Зададим чёрный цвет для фона и добавим ему лёгкую прозрачность с расширением на весь экран. За счет использования свойства z-index, фон располагается поверх всех остальных элементов.
В завершении, с помощью свойства display: none;, скроем его до момента активации javascript.

Теперь, давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаем связующий идентификатор #popup и уже в нем определяем все необходимые параметры нашего всплывающего окна. Задаем ширину модального окна и его положение на странице. Так же определяем цвет фона, устанавливаем стиль и цвет границы вокруг элемента, добавляем эффект тени и немного закругляем углы нашего информационного блока.

.popup {
    top: 25%;
    left: 0;
    right: 0;       
    font-size: 14px;
    margin: auto;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
    position: absolute;
    padding: 15px 20px;
    border: 1px solid #383838;
    background: #fefefe;
    z-index: 1000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-animation: fade .6s;
    -moz-animation: fade .6s;
    animation: fade .6s;
}

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

Закрываем окно

На завершающем этапе, необходимо реализовать функционал закрытия окна и сформировать внешний вид кнопки. Для этого создаем класс close и начинаем оформлять кнопку закрытия:

.close {
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    position: absolute;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: rgba(0, 131, 119, 0.9);
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    outline: none;
 
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-family:  Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
/* кнопка закрытия при наведении */
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
}

Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки, делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении, определяемся с изменением цвета фона при наведении курсора мыши на кнопку.

Все! Дорогие друзья. Если вы сделаете все правильно, то получите в свое распоряжение всплывающее окно при загрузке сайта, с возможностью управления временем появления. Как вы воспользуетесь этой техникой исполнения, зависит только от вас. Но упаси вас бог, размещать в таких окнах разного рода «шнягу-шняжную» и уж тем более блокировать возможность закрытия окна.

Уважайте своих пользователей и они к вам потянутся.
 

 

ПыСы:

31.03.2015г. После написания статьи, самый популярный вопрос в комментариях — как прикрутить к этому окну запись cookie, чтобы оно являлось взору пользователя при первом заходе на сайт, или же с определённым интервалом. Вариантов много и разных. Чтобы закрыть вопрос, расскажу о самом распространённом, с использованием библиотеки jQuery и плагина jquery.cookie.js.
Всё что вам нужно, это иметь подключёнными библиотеку jQuery и плагин jquery.cookie.js к вашему документу Html.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

jQuery подключаете из бездонных хранилищ Google, а плагин Cookie можно загрузить c сайта плагинов jQuery и разместить у себя на сайте в папке «js» (например).
Далее подключаете файл javaScript, содержащий код работы с cookie, или же включаете текст скрипта в HTML код с помощью тега <script>, вот так:

<script type="text/javascript">    
$(function() {
  // Проверяем запись в куках о посещении
  // Если запись есть - ничего не происходит
     if (!$.cookie('hideModal')) {
  // если cookie не установлено появится окно
  // с задержкой 5 секунд
	var delay_popup = 5000;
	setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
     }
     $.cookie('hideModal', true, {
   // Время хранения cookie в днях
	expires: 7,
	path: '/'
   });
});
</script>

Исполняемый js лучше всего прописать перед закрывающим тегом </body>. В данном примере я показал вариант сохранения cookie после закрытия всплывающего окна в течении семи дней, это означает, что окно будет показано пользователю при первом посещении, один раз. На протяжении последующих семи дней, или до момента пока пользователь не почистит куки своего браузера, окно показываться не будет.
Как вы понимаете, обработчик события записи cookie, вы можете привязать к любому другому элементу. Время хранения куки устанавливаете в expires: 7 (в примере это 7 дней). Задержку появления окна регулируете в функции setTimeout, по умолчанию выставил 5000, т.е окно всплывёт через 5 секунд после загрузки страницы.

Обновление от 14.11.2013

Сосем немного изменил внешний вид модального окна, прикрутил простейшую анимацию появления, с помощью изменения свойства прозрачности (opacity) от 0 к 1. К демо, добавил и вариант всплывающего окошка с записью cookie, при просмотре, не забывайте, что окно в этом варианте появляется 1 раз в 7 дней, так что чистим куки))).

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

Теперь надеюсь точно — Всё!

Рекомендую:

bootstrap-video-tuts

С Уважением, Андрей

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

172 комментария
  1. Вот беда! Начала внедрять, а окно не работает. Движок wordpress. Похоже полностью не работают в стилях parent_popup — нет затемнения, окно находится просто внутри странцы, а не поверх. С чем это может быть связано я не знаю, может вы сможете помочь?

    Ответить
    • driver:

      Попробуйте увеличить значение свойства z-index в селекторе #parent_popup

      Ответить
      • Увы! увеличение z-index не помогает, да он и так оч большой. Где-то конфликт или настоление...но я не знаю как найти... Очень жаль. Очень хорош Ваш вариант, главное такой простой!

        Ответить
        • Данная проблема в Jquery

          Конфликт скриптов

        • driver:

          Дмитрий ответил, спасибо.

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

          Если использовать вариант на чистом js, без jquery.cookie, всё должно работать на ура, или же смотрите в сторону jQuery, сколько и откуда у вас прикручено этого чуда))).

      • Я извиняюсь! Была банальная опечатки в стилях. А я неделю про z-index читала))) Все прекрасно работает! Спасибо огромное!

        Вот только на мобильном окно не закрывается при нажатии на крестик. Получается что оно висит и закрыть его никак нельзя. Как думаете, в чем может быть причина?

        Ответить
        • ВСЕ РАБОТАЕТ ПРЕКРАСНО! Очень невнимательная я по вечерам)) Спасибо Вам большое! Повторюсь, это лучшее всплывающее окно, которое я встречала) Добавлю в свою коллекцию на сайте.

  2. Добрый день,

    Спасибо за полезные решения, которые я периодически использую! %)

    Подскажите пожалуйста, как сделать так чтоб после закрытия такого попапа пользователя не кидало в начало страницы. Ато выходит, что после того как человек пролистал пол страницы, появляется попап, он его закрывает, и снова в самом начале. Возможно ли сделать так, чтоб он оставался на том месте, куда долистал?)

    Спасибо за то, что Вы делаете!

    Ответить
  3. driver:

    В ссылке кнопки закрытия у вас прописан атрибут href="#", что конечно логично, на то это и ссылка, только вот решётка «#» по умолчанию служит якорем к началу страницы, так что или исключите href="#" из ссылки полностью, или пропишите что-то типа href="#close"

    Ещё можно просто добавить return false; в событие onclick, тогда ссылка закрытия, применительно к вашему окну, будет выглядеть так:

    <a title="Закрыть" href="#" onclick="document.getElementById('parent_popup').style.display='none'; return false;">×</a>

    Остаётся только выбрать, какой вариант, для вас наиболее кошерный)))

    Ответить
  4. Супер четкие решения, оба работают, спасибо!!!

    Теперь пользователи как минимум на нескольких моих сайтах не будут так по 100500 раз пролистывать всю страницу!)

    Ответить
    • driver:

      Рад, что всё у вас получилось. Побывав у вас на сайте, заметил, что форма записи на курсы, сваливается за пределы футера(подвал сайта), происходит это из-за лишнего внутреннего отступа слева, в селекторе .footer_left исключите padding-left: 50px;, или же присвойте нулевое значение, и всё встанет на свои места.

      Удачи!

      Ответить
  5. Всё работает. Спасибо

    Ответить
  6. А на 1 с битриксе можно использовать это решение?)

    Ответить
  7. и куда его вставлять что бы он всплывал на главной?) в index?)

    Ответить
    • 4545:

      Это зависит от того на чём у Вас сайт. Если на html, тогда в index.html, если на DLE то скорее всего в home.tpl. Для самописа какого нибудь это может быть index.php.tpl. Для фреймворка макссайт можно в папке home в файл text.php вписать.

      Ответить
  8. Евгений:

    Подскажите, пожалуйста, как сделать, чтобы окно закрывалось при клике вокруг окна, а не только по крестику? Спасибо.

    Ответить
  9. Приветствую Вас! Хотел поставить модальное окно на сайте по Вашей инструкции. Всё заработало сразу!..но окно открывалось после загрузки любой страницы. Привязать к кукам так и не получилось. Окно открывается, но никак не хочет закрываться. В чем может быть проблема?

    Ответить
  10. 4545:

    Почему-то решение с куками работает по-разному на разных сайтах. На одних закрытие действует для всех страниц, а на других только для той страницы где закрыли.

    Ответить
    • 4545:

      Заметил, что такое поведение кукисов есть лишь у сайтов на хостинге VESTA, у них ещё панель своя какая-то.

      Ответить
  11. Олег:

    Всё сделал , всё работает . Интересует как реализовать такое . На сайте есть карточки товара , которые размещены во всплывающих окнах. Как сделать что бы по определенной внешней ссылке (например: mydomen/pop-up1.php открывалось нужное всплывающее окно с карточкой товара.Карточек порядка 20 штук. Подскажете ?

    Ответить
  12. Игорь:

    Здравствуйте! Подскажите пожалуйста, как реализовать данный метод на движке opencart.

    В принципе все установил и работает, но окно появляется каждый раз при обновлении страницы или открытии новой. Куки не работают, может кто поможет?

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru