Главная » Уроки » Создаем всплывающее окно при загрузке сайта с помощью 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 !

165 комментариев
  1. kreolka_8:

    Все получилось, спасибо!

    А какой стиль прописать, что бы окно всплывало плавнее?

    Ответить
    • driver:

      Добрый вечер!

      Статья заточена на то, чтобы использовать как можно меньше javascript и тем самым обойти блокировку всплывающих окон при первой загрузке сайта. Материал создавался в качестве эксперимента, так как я очень негативно отношусь ко всякого рода всплывающей хрени при загрузке страниц, развивать эту тягомотину нет никакого желания))). Вы же можете реализовать задуманное с помощью полноценных плагинов jQuery, благо описаний данной техники исполнения навалом в инете. Надеюсь «гугля» вам поможет.

      Удачи!

      Ответить
  2. ифsy:

    Огромное спасибо! Все получилось!

    Теперь бы как-нибудь добавить функцию появления экрана один раз в день/в неделю/в месяц.

    Ответить
    • driver:

      Ищите, да обрящите! Существуют методы показа всплывающего окна с блокировкой по cookie, посмотрите здесь: Тынц>>, не совсем то что вам надо, но чем черт не шутит.

      Удачи!

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

    Все работает! спасибо! наконец-то я поняла как это делается. Только вот у меня окошко уплывает под шапку сайта. Как это поправить?

    Ответить
    • driver:

      Nigrata

      Скорее всего стоит поэкспериментировать со значением margin: 10% auto;, меняя процентное отношение или исключая auto из расчета размера отступов. Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах.

      Удачи!

      Ответить
  4. Отличная статья. Без лишних заморочек.

    Огромное спасибо!

    Ответить
  5. zamut:

    Все работает, спасибо. Вопрос, как подкорректировать css для отображения стиля в IE? И вот решение вопроса заданного ифsy:

    if (document.cookie.indexOf('_visited=1') == -1){ var delay_popup = 5000; setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup); document.cookie = '_visited=1; path=/';}

    Ответить
  6. Quarter:

    Приветствую. Преогромное спасибо за поп ап.

    А как бы на этом окне разместить кнопку с функцией «больше не показывать»?

    Ответить
    • driver:

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

      Ответить
  7. Дарья:

    СПАСИБО БОЛЬШОЕ! ЗАМЕЧАТЕЛЬНАЯ СТАТЬЯ!

    Ответить
  8. Здравствуйте. Интересует преобразование этого способа под следующую задачу:

    открытие окна (скажем по IP адресу один раз одному пользователю)

    в нем стоит подписка на новости и никаких возможностей его закрыть — пока человек не подпишется. При нажатии Подписаться — он переходит на другую конкретную страницу.

    Или подскажите другой способ решения этой задачи.

    Спасибо!

    Ответить
  9. Юлия:

    С виду всё отлично! Спасибо за урок!!

    А можно ли реализовать автоматическое закрытие окна, допустим через 10 секунд?

    Ответить
    • driver:

      Можно.

      setTimeout(function(){
        document.getElementById('parent_popup').style.display = 'none';
      }, 10000);
      Ответить
  10. Все же вы бы не могли дать код js с запоминанием куки на 1 день хотя бы, тоесть чтобы человек раз в день видел это окно ?

    Ответить
    • driver:

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

      Ответить
  11. Андрей здравствуйте!

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

    Работаю в программе Веб Билдер (WYSIWYG) объясните пожалуйста доступным языком для непонятливых =)

    Спасибо! =)

    Ответить
    • driver:

      Здравствуйте Михаил.

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

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

      Ответить
  12. Спасибо за урок! Не могли бы Вы подсказать как сделать что бы данный скрипт был перед всплывающим окном?

    Снег на сайт (второй вариант)

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

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