/ Ваше разрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

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

14-12-2018, 10:26
Автора больше заинтересовала техническая сторона вопроса и методы его решения. Придумывать особо ничего не пришлось, все давно придумано и прекрасно работает. Сегодня мы разберем детально как проще всего реализовать модальное окно всплывающее при загрузке сайта, используя в работе магию новых свойств CSS3 и небольшого jаvascript, чтобы усыпить бдительность браузеров и иметь контроль над временем появления информационного блока.
Для начала на специально приготовленной демо-странице, вы можете посмотреть на конечный результат всего того что мы будем с вами делать. В всплывающем окне Вы в последствии сможете вставить все что угодно, главное не переусердствуйте.

Разметка HTML

Разметка нашего всплывающего окошка чрезвычайно проста. Нам понадобятся всего лишь два блочных элемента div с идентификаторами id, для привязки к jаvascript и формирования внешнего вида с помощью стилей 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>
Для того чтобы окно появлялось не сразу при загрузке сайта, а с задержкой в несколько секунд, мы используем небольшой jаvascript и уже с помощью его сможем регулировать время появления всплывающего окна. Все браузеры спокойно отнесутся к такому раскладу и не будут блокировать работу скрипта, а значит и само появление всплывающего окошка. Вставить этот jаvascript лучше всего в конце тела страницы html перед закрывающим тегом 
</body>
Ну а сам скрипт состоит всего лишь из нескольких строк:
<script type="text/jаvascript">
    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
с помощью которого мы свяжем наше окно с jаvascript и сформируем базовый контейнер 
<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;
скроем его до момента активации jаvascript.
Теперь, давайте перейдем непосредственно к оформлению внешнего вида самого модального окна. Здесь всё так же очень просто. Создаем связующий идентификатор #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);
}
Для кнопки закрытия мы установили цвет фона и степень его прозрачности. Определили положение, размер и насыщенность текста, добавили немного эффекта тени для текста. Затем определяем позицию кнопки, ширину и цвет рамки, а с помощью свойства скругления рамки, делаем нашу кнопку круглой, и для большей выразительности добавим легкую тень. В завершении, определяемся с изменением цвета фона при наведении курсора мыши на кнопку.
Чтобы окошко появлялось плавно, используем простейшую анимацию css3 
animation: fade .6s;
в селекторах 
#overlay
и .popupа также определим ключевые кадры с помощью правила 
@keyframes
:
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade {    from { opacity: 0; }    to { opacity: 1 }
}
@-webkit-keyframes fade {    from { opacity: 0; }    to { opacity: 1 } }
@keyframes fade {    from { opacity: 0; }    to { opacity: 1 }
}
В итоге, в сборе весь код css будет выглядеть так:
/* Всплывающее окно * при загрузке сайта */
/* базовый контейнер, фон затемнения*/
#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;
}
/* модальный блок */
.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;
}
/* заголовки в модальном блоке */
.popup h2, .popup h3 {    margin: 0 0 1rem 0;    font-weight: 300;    line-height: 1.3;    color: #009032;
    text-shadow: 1px 2px 4px #ddd;
}
/* кнопка закрытия */
.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);
}
/* изображения в модальном окне */
.popup img {    width: 100%;    height: auto;    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
}
/* миниатюры изображений */
.pl-left,
.pl-right {    width: 25%;    height: auto;
}
/* миниатюры справа */
.pl-right {    float: right;    margin: 5px 0 5px 15px;
}
/* миниатюры слева */
.pl-left {    float: left;    margin: 5px 18px 5px 0;
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fade {    from { opacity: 0; }    to { opacity: 1 }
}
@-webkit-keyframes fade {    from { opacity: 0; }    to { opacity: 1 } }
@keyframes fade {    from { opacity: 0; }    to { opacity: 1 }
}
Для расширения функционала модального окна, добавил и стили миниатюр изображений, ситуации бывают разные, частенько в модальных окнах используют различные картинки, впрочем в демо всё прекрасно показано.

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

Некоторые корректировки

Рассмотрим как прикрутить к окну запись 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/jаvascript" src="js/jquery.cookie.js"></script>
jQuery подключаете из бездонных хранилищ Google, а плагин Cookie можно загрузить c сайта плагинов jQuery и разместить у себя на сайте в папке «js» (например).
Далее подключаете файл jаvascript, содержащий код работы с cookie, или же включаете текст скрипта в HTML код с помощью тега 
<script>
вот так:
<script type="text/jаvascript">    $(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 секунд после загрузки страницы.
К окну добавлена простейшая анимация появления, с помощью изменения свойства прозрачности (opacity) от 0 к 1. В демо есть ссылка на вариант всплывающего окошка с записью cookie, при просмотре, не забывайте, что окно в этом варианте появляется 1 раз в 7 дней, так что чистим куки.

Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Курс цифрового рисунка (2019) PCRec

Курс для начинающих, направлен на базовые основы рисунка в Adobe Photoshop. Он состоит из 10 занятий.

М. А. Бодров - Психологическое воздействие на личность

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

Мои дети живут дружно (2019) PCRec

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

 
Скрипт социальных кнопок