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

161 комментарий
  1. евгений says:

    Спасибо большое превосходное рабочее решение ! А главное работающее восхитительно !

    Ответить
  2. Артем says:

    Привет, код прекрасный, все зашибись. Но, как можно сделать чтобы окно всплывало только тем кто новый посетитель ,как на сайте есть окно prntscr.com/bnt3ky. Посмотрите пожалуйста: vsedlyavanny.kz/shop/Dushevie_kabini/

    Ответить
    • driver says:

      Здравствуйте, Артём.

      В принципе достаточно прикрутить к окошку jquery.cookie.js, и установить время хранения cookie в днях expires: 365, что равно 1 году. Соответственно при заходе нового посетителя на сайт окно будет показано пользователю 1 раз в заданный период (1 год), или пока товарищ, не почистит cookie в своём браузере.

      Ответить
  3. Петр says:

    Спасибо, то что надо! Долго искал такое решение. Легкий и понятный скрипт.

    Привинтил только кусочек с cookies к тому, что ранее было слеплено.

    $(function () {

    if (!$.cookie ('hideModal')) {

    setTimeout (function () {

    $(«#popup»).fadeIn (4000)}, 3500);

    $(«#popup-close»).click (function (e) {$(«#popup»).fadeOut (1500);

    $.cookie ('hideModal', true, {

    // Время хранения cookie в днях

    expires: 1,

    path: '/'

    });

    });

    }

    });

    Ответить
    • driver says:

      Спасибо за отзыв. Рад, что вам пригодилось.

      Ответить
    • Артем says:

      <!-- Модальное Окно --> <div id="overlay"> <div class="popup"> <h2>АКЦИЯ</h2> <p> Поделись нашей страничкой,на своей страничке в социальной сети, сфотографируй на свой мобильный,покажи нам и получишь скидку 10% на АБСОЛЮТНО ЛЮБОЙ УНИТАЗ в нашем магазине! </p> <div id="photo"> <img class="input-text" style="width: 100%; height: 100%;" src="/images/socbuton.png" width="1297" height="504"> </div> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button> </div> </div> <!-- Модальное Окно --> <? $(function () { if (!$.cookie ('hideModal')) { setTimeout (function () { $(«#popup»).fadeIn (4000)}, 3500); $(«#popup-close»).click (function (e) {$(«#popup»).fadeOut (1500); $.cookie ('hideModal', true, { // Время хранения cookie в днях expires: 1, path: '/' }); }); } }); ?>

      Помогите пожалуйста, вроде все слепил прилепил но не работает): видимо я совсем чайник...

      Ответить
      • driver says:

        Здравствуйте, Артём.

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

        Достаточно в setTimeout указать правильный id ('overlay')

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

        Ну, и конечно, у вас должна быть подключена библиотека jQuery и сам плагин jquery.cookie.js для обработки cookie

        Ответить
  4. Никита says:

    У меня идет конфликт jquerry библиотек, что делать?

    Ответить
    • driver says:

      Видимо fancybox, подтягивает, или вы сами подключаете повторно фреймворк jQuery и происходит конфликт между двумя версиями.

      Могу предложить несколько вариантов решения:

      1. Оставьте одну версию библиотеки jQuery, лучше которая подтягивается с гугла <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> например.

      2. Попробуйте в начале js окна вместо $(function() прописать $(document).ready(function () или jQuery(function($)

      3. Есть ещё костыль в виде jQuery.noConflict, но как правило он редко помогает...

      Ответить
  5. Юрич says:

    То что нужно. Спасибо за статью — беру на вооружение. Как раз сейчас делаю такую фишку чтобы была всплывашка с видео при открытии сайта и кукисы жили 1 день. Еще раз спасибо!

    Ответить
  6. петр says:

    может подскажет сделал такое окно движок джумла шаблон Rt Ximenia Responsive записал все это в модуле, вобщем не работаю куки без куков просто вызов скрипта все работает а куки не сохраняются, как их правильно подключить в джумле

    Ответить
  7. StiXy says:

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

    Пример:

    <div id="overlay"> <div class="popup"> <h2>Модальное Окно!</h2> <p style="text-align:center"><a href="http://ya.ru"><img src="view.png" /> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button> </div> </div>

    Ответить
    • Vitaliy says:

      <p style="text-align:center"><a href="http://ya.ru"><img src="view.png" /> <button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>

      А где закрывающие теги (</a>, </p>)?

      Ответить
      • StiXy says:

        Да, совершенно верно, мой касяк. Теперь все супер!

        Еще вопрос, как сделать переход по своей ссылке при закрытии окна/нажатия крестика?

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

    Здраствуйте Уважаемый!

    Ставлю Вашу конструкцию на DLE-не работает.Можете объяснить почему?

    Вот скрин

    Ответить
    • driver says:

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

      Судя по скрину у вас напрочь отсутствуют подключаемые стили css, которые в демо прописаны в разделе <head> в секции <style type="text/css"></style>, других причин не вижу

      Ответить
      • Сергей says:

        Спасибо заработало!

        Добавил Ваш код к этому

        ниже и заработало.

        Буду дальше мудрить-хочу вставить в Ваше окно подписку от FeedBurner.

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

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