Главная » Уроки » Создаем всплывающее окно при загрузке сайта с помощью 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. Добрый день. Подскажите пожалуйста, какой код написать чтоб с мобильного телефона баннер не запускался?

    Ответить
    • driver:

      Просто отказаться от него, особенно если как у вас, баннер навязывается пользователям, без возможности закрытия, развивать эту тему у меня нет никакого желания (((

      Ответить
  2. Abay:

    Здравствуйте!!! Подскажите пожалуйста а как сделать так чтобы форма закрывалась

    при клике за пределами формы (при клике в любом месте страницы). Заранее спасибо!

    Ответить
    • driver:

      Достаточно в <div id="parent_popup"> продублировать функцию закрытия окна:

      onclick="document.getElementById('parent_popup').style.display='none';"

      Должно получиться следующее:

      <div id="parent_popup" onclick="document.getElementById('parent_popup').style.display='none';">
      Ответить
  3. Дмитрий:

    А можно сделать, чтобы оно открывалось только 1 раз при заходе на сайт?

    Ответить
  4. Супер! Все работает и все максимально просто без лишних скриптов. Спасибо!

    Ответить
  5. Как сделать чтобы это убиралось с ваодом кода в поле в окне?

    Ответить
  6. Добрый день, а подскажите пожалуйста, как вызывать этот попам при клике на ссылку на странице? (тобишь что ставить в href). Извиняюсь за глупый вопрос, но в коде я очень слаб.

    Заранее спасибо за ответ!

    Ответить
  7. Спасибо за твой сайт. не передать словами.

    пробовал подключить к своему сайту — все получилось

    подрубил библиотеку суков и сработал вот этот код

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

    Вопрос:

    Как сделать так чтобы в куки записывалось только после нажатия «кнопки» или «крестика», а не при обновлении повторно страницы (т.е в куки пишется сразу без выполнения действий)

    Ответить
    • driver:

      Здравствуйте, Николай.

      Раз уж вы подключили jQuery в работу, то для начала давайте немного подправим саму кнопу закрытия, теперь она будет выглядеть так:

      <a id="setCookie" class="close" title="Закрыть">X</a>

      Обратите внимание на id="setCookie", идентификатор с помощью которого мы привязываем кнопку с функцией записи cookie.

      Теперь остаётся выправить js:

      $(document).ready(function() { $("#setCookie").click(function() { $.cookie("popup", "24house", { expires: 1 }); $("#parent_popup").hide(); }); if ($.cookie("popup") == null) { setTimeout(function() { $("#parent_popup").show(); }, 5000) } else { $("#parent_popup").hide(); } });

      Время жизни cookie выставляете в expires: 1, я поставил сутки, меняйте на своё усмотрение. Задержка появления в setTimeout 5000 — соответствует 5 секундам. Ну а через .show и .hide соответственно показываем и скрываем окно.

      Всё! Теперь не будет показывать в течении суток, если пользователь нажал на кнопку закрыть или любой другой элемент имеющий id="setCookie".

      Ответить
      • много экспериментировал, решил написать и увидел что обновили статью, но не работает.

        кнопка

        <a id="setCookie" class="button" title="Продолжить" href="/">« Продолжить »</a>>

        крестик

        <a id="setCookie" class="c1lose" title="Закрыть">X</a>

        при нажатии на кнопку все работает. но при нажатии на «крестик» ничего не происходит. Если добавить в «крестик» href="/" то событие обрабатывается но запись в куки не происходит.

        подключаю не скриптом а <script type="text/javascript" src="{THEME}/js/oko.js"></script>

        Ответить
        • Заметил еще — если убрать у кнопки id="setCookie" то, «крестик» начинает работать.

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

  8. Все супер!!! Все на столько доступно, что я с первого раза все сделал за пол часа (никогда ранее не открывал CSS), один только вопрос, у меня почему-то нет крестика «закрыть», вместо него лишь круглешок, что я упустил? Но все равно ОГРОМНЕЙШЕЕ СПАСИБО за доступно написаную статью!!!

    Ответить
    • driver:

      Не знаю в чём у вас косяк, в роли символа кнопки закрытия банальная буква «X» ничего более:

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

      Ответить
      • Все супер!!! Точно, упустил «Х» ))) Все работает именно так, как я и хотел!!! Спасибо!!!

        Ответить
        • driver:

          Ну и замечательно. Только маленький совет, чтобы кнопка закрытия отображалась интересней и корректно при наведении, в селектор .close:hover добавьте следующие свойства:

          text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px;

          Так же можете сменить и цвет фона кнопки при наведении на красный, что более логично для восприятия:

          background-color:rgba(255, 0, 0, 0.8);

  9. Здравствуйте!!! Подскажите пожалуйста, как скрыть показ модального окна на мобильных устройствах или изменить параметры отображения (размеры). Это важно для предварительного ознакомления пользователя с ресурсом и никоим образом не используется в целях рекламы.

    С уважением

    Ответить
    • driver:

      Здравствуйте, Назар.

      Скрыть показ модального окна на мобильных устройствах можно с помощью медиа-запросов CSS. Например, чтобы окно не всплывало на экранах менее 470px используйте следующее:

      @media screen and (max-width: 470px){ #parent_popup, #popup { display: none !important;} }

      Так же вы можете сделать окошко более-менее резиновым, выставив значения ширины в процентах и указав максимально возможный размер. В селекторе #popup пропишите базовую ширину примерно width: 60%;, а максималку выставите в зависимости от размера содержания, обычно это 500-600px max-width: 600px;, высота окна будет вычисляться автоматом.

      Ответить
  10. Спасибо большое за ваши доступные уроки для таких как я! Только теперь я столкнулся с тем, что в выплывающем окне не могу разместить форму обратной связи, сервисы которыми я пользовался ранее, стали платными, да и формы созданные там отображаются «ломая» окно, может вы подскажете, как создать свою рабочую форму обратной связи, что бы она и отображалась правильно, и отправляла письма на МОЙ почтовый ящик? Образец, которого я добился сейчас, (можно увидеть на сайте: www.cleaner-master.ru) меня вполне бы устроил внешне, но он почему то не работает((( Пишет недоступно, и письма не отправляет((( Пожалуйста, помогите мне если это возможно, думаю многим пригодится)))

    Ответить
    • driver:

      Проверил отправку сообщений через вашу форму, обработчик выдаёт что сообщение отправлено.

      С внешним видом формы поработаю в ближайшее время.

      Ответить
      • Буду очень благодарен))) Буду очень ждать))) И если бы вы сделали какую нибудь симпатичную кнопочку вашего ресурса, стандартного размера 88×31, я бы с удовольствием разместил бы предлагаемый вами html код с адресом кнопочки ссылающейся на ваш великолепный сайт)))

        Ответить
  11. Это лучшее, что я видела на эту тему в интернете. СПАСИБО!

    Ответить
  12. Подскажите, как добавить форму отправки имени и email через это всплывающее окно? Спасибо.

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

Отправляя к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