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

168 комментариев
  1. если кому интересно то вот решение (помогли на другом форуме):

    в файле со всплывающим окном изменить:

    z-index: 99998;

    а в javascript у снега поставить:

    var zIndex = 99999;

    Ответить
    • driver:

      Alexander

      Спасибо, надеюсь, ваша информация пригодится многим.

      Ответить
  2. Спасибо! Всё работает...Но у меня возникла следующая ситуация, которую я сам исправить не способен...Итак, в всплывающее окно я разместил выпадающий список (select) на Javascript... Всё ок! Но теперь не пойму как добиться закрытия окошка после выбора какой-либо из строчек в списке...

    Ответить
    • driver:

      Artur.

      Специально не озадачивался, но думается мне, что логично будет добавить ссылкам из выпадающего списка событие

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

      по крайней мере, это логично, вот только не знаю, как отреагирует «ваш» javascript, хотя всё должно сработать

      Ответить
  3. Саня:

    Большое спасибо! Подскажите пожалуйста, как сделать, чтобы окно, открывалось только на главной странице?

    Ответить
    • driver:

      Здравствуйте.

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

      Ответить
  4. Всем привет. Очень нравиться это окно всплывающее, но прописать у меня его не получается. Может кто поможет...

    Ответить
  5. Сергей:

    Подскажите как сделать, что бы окно всплывало только при первом посещении сайта?

    Ответить
    • driver:

      Замените действующий javascript:

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

      На такой:

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

      В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))

      Ответить
      • Замените действующий javascript:

        var delay_popup = 5000;

        setTimeout («document.getElementById ('parent_popup').style.display='block'», delay_popup);

        На такой:

        $(function (){

        if (document.cookie.indexOf ('_visited=1') == -1) {

        var delay_popup = 3000;

        setTimeout («document.getElementById ('parent_popup').style.display='block'», delay_popup);

        document.cookie = '_visited=1; path=/';

        }

        });

        В этом случае окно будет показываться пользователю один раз, пока он не почистит «куки» своего браузера)))

        Не работает такой код. Библиотеки дополнительные подключать не нужно?

        Ответить
        • driver:

          Что именно не работает? Не открывается окно или не срабатывает обработка cookie? Понадобится jQuery.

        • Не всплывает окно, а следовательно и куки не записываются.

        • driver:

          Дык, они уже записались, вот оно и не всплывает)) Очистите историю браузера или откройте в другом, где не открывали страницу с окном.

        • Сергей:

          У меня куки пишет но не всплывает. Подключаю к joomle 3

  6. Респект автору...красава

    большое спасибо за код

    Я искал парился никак на джумлу не мог воткнуть, кучу перерыл тут за пару секунд

    спасибо!

    Ответить
  7. У себя на сайте http://worldrc.ru/ сделал с cookie:

    Берем код jquery (если еще не подключена) и cookie от яндекса и подключаем в header:

    Далее ваш скрипт подключаем в подвале:

    Полезно!!! Прочитайте!!!

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

    Ну и все стили в файл стилей.

    Только после этого заработало.

    Ответить
  8. Антон:

    Заработало вот с таким скриптом:

    $(function(){
    if (document.cookie.indexOf('_visited=1') == -1) {
    $.cookie ('_visited', 1, {
     
    expires: 30,
     
    path: '/'
     
    }); 
    var delay_popup = 3000;
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
     
    }
    });
    Ответить
    • driver:

      Спасибо, обязательно возьмём на заметку ваш вариант.

      Ответить
  9. anonymous:

    Доброго времени суток такой вопрос как сделать чтобы окно всплывало сразу просто происходит задержка в течение 4 секунд заранее спасибо

    Ответить
  10. Здравствуйте. Попробовал вариант с куки от driver .Все работает, Только вот хотел спросить, а как сделать чтоб время жизни куки было 1 день?

    Ответить
  11. Спасибо, отлично работает.

    Ответить
  12. dima:

    Здравствуйте. Подскажите пожалуйста как сделать так чтоб после нажатия кнопки «подробнее» или закрыть баннер больше не показывался.

    Ответить
    • driver:

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

      Ответить
      • dima:

        Здравствуйте. Огромна просьба помочь, а то целую неделю мучаюсь. все сделал так как у Вас, но скрипт c куки использую этот

        if ($.cookie('viewed_banner') != $('#parent_popup p').text()) {
            $('#parent_popup').show();
            $('.close').on('click', function() {
                $('#parent_popup').hide();
                $.cookie('viewed_banner', $('#parent_popup p').text(), { expires: 1, path: '/' });
            });
            $('.button').on('click', function() {
                $('#parent_popup').hide();
                $.cookie('viewed_banner', $('#parent_popup p').text(), { expires: 1, path: '/' });
            });
        }

        но к сожалению баннер не запускается.

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

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