Створюємо спливаюче вікно при завантаженні сайту за допомогою CSS3 і трохи javascript

56

Всім нам блукаючим по просторах глобальної мережі попадалися на очі сайти, при завантаженні яких відразу, або з затримкою в декілька секунд з’являлося спливаюче вікно з різним вмістом, чи то просто оголошення, реклама якого-небудь продукту, підписна форма або форма зворотного зв’язку.
Можна по різному ставитися до таких методів подачі інформації. Мене, наприклад, всі ці спливаючі вікна вискакують під час відвідування якого-небудь сайту, м’яко сказати напружують, та що там, вони мене просто бісять, хочеться відразу піти, залишити цей сайт, що в більшості випадків я і роблю. Так і всі сучасні браузери з підозрою ставляться до різного роду спливаючих вікон на початковому етапі завантаження сайту, вони їх просто-напросто блокують. Але, як ми бачимо, багато, дуже багато веб-майстри реалізують саме такий, нав’язливий спосіб подачі інформації.

Мене більше зацікавила технічна сторона питання та методи його вирішення. Вигадувати нічого особливо не довелося, все давно придумано і прекрасно працює. Сьогодні разом з вами, ми детально розберемо, як найпростіше реалізувати модальний спливаюче при завантаженні сайту, використовуючи в роботі магію нових властивостей CSS3 і зовсім невеликого javascript, щоб приспати пильність браузерів і мати контроль над часом появи інформаційного блоку.

Для початку, не відходячи від каси, на спеціально приготовленої демо-сторінці, ви можете подивитися на кінцевий результат всього того, що ми будемо з вами робити. У прикладі я використав у спливаючому вікні оголошення про старт продажів нового відеокурсу «Практика гумової верстки». Ви ж надалі зможете вставити в модальний все що завгодно, головне не перестарайтеся )))).

Дивитися Демо

Розмітка HTML

Розмітка нашого спливаючого віконця надзвичайно проста. Нам знадобляться всього лише два блочних елемента div з ідентифікатором id, для прив’язки до javascript і формування зовнішнього вигляду за допомогою стилів CSS. Елемент

відповідає за позиціонування, колір фону, прозорість і ступінь його затемнення при запуску спливаючого вікна. Всередині контейнера

буде розміщуватися сам зміст модального вікна. Також нам потрібно організувати посилання для закриття вікна. Для наочного прикладу розмістимо простий заголовок і парочку параграфів текстового змісту. В результаті ми отримаємо повну розмітку нашого вікна приблизно такого вигляду:

Модальне Вікно!

Ширина модального вікна задана у відсотках, в залежності від ширини батьківського контейнера, в даному прикладі це фон затемнення.

Передбачена можливість використання вбудованих мініатюр, розташованих ліворуч або праворуч, в окремому div-контейнері з виділеним класом .pl-left .pl-right відповідно.

Розмір блоку мініатюр так само визначив процентної запису (25%), тим самим забезпечивши можливість пропорційного зміни, при перегляді на екранах різних користувацьких пристроїв.

Найпростіша анімація появи з допомогою зміни властивості прозорість (opacity) від 0 до 1

Модальне Вікно!

Ширина модального вікна задана у відсотках, в залежності від ширини батьківського контейнера, в даному прикладі це фон затемнення.

Передбачена можливість використання вбудованих мініатюр, розташованих ліворуч або праворуч, в окремому div-контейнері з виділеним класом .pl-left .pl-right відповідно.

Розмір блоку мініатюр так само визначив процентної запису (25%), тим самим забезпечивши можливість пропорційного зміни, при перегляді на екранах різних користувацьких пристроїв.

Найпростіша анімація появи з допомогою зміни властивості прозорість (opacity) від 0 до 1

Для того, щоб вікно не з’являлося відразу при завантаженні сайту, а з затримкою в декілька секунд, ми використовуємо невеликий javascript і вже з його допомогою зможемо регулювати час появи спливаючого вікна. Всі браузери спокійно поставляться до такого розкладу і не будуть блокувати роботу скрипта, а значить і сама поява спливаючого віконця. Вставити javascript краще всього в кінці тіла html-сторінки перед закриваючим тегом . Ну а сам скрипт складається всього лише з декількох рядків:

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

var delay_popup = 5000;
setTimeout(“document.getElementById(‘overlay’).style.display=’block'”, delay_popup);

У прикладі час появи вікна виставлено в 5000, що відповідає приблизно 5 секунд, ви можете прописати будь-яке інше значення.

Для закриття вікна ми просто використовуємо стандартну кнопку, тег з подією onclick і певним класом class=”close”, для можливості оформлення зовнішнього вигляду через CSS.

<button class="close" title="Закрити" onclick="document.getElementById('overlay').style.display='none';"></button>

Таким чином ми підійшли до найцікавішого моменту(на мій погляд), до формування стилів спливаючого вікна.

Стилі CSS

Для початку створимо ідентифікатор #overlay з допомогою якого ми зв’яжемо наше вікно з javascript і сформуємо базовий контейнер

#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;
}

#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;
}

.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);
}

.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: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 2px 0 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.5 s;
-moz-transition: all 0.5 s;
transition: all 0.5 s;
}
/* кнопка закриття при наведенні */
.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 type="text/javascript" src="js/jquery.cookie.js">

jQuery підключаєте з бездонних сховищ Google, а плагін Cookie можна завантажити з сайту плагінів jQuery і розмістити у себе на сайті в папці «js» (наприклад).
Далі підключаєте файл javaScript, що містить код роботи з cookie, або ж включаєте текст скрипта в HTML код за допомогою тега , ось так:

<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: '/'
});
});

$(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: ‘/’
});
});

Виконуваний js найкраще прописати перед закриваючим тегом . У даному прикладі я показав варіант збереження cookie після закриття спливаючого вікна протягом семи днів, це означає, що вікно буде показано користувачеві при першому відвідуванні, один раз. Протягом наступних семи днів, або до моменту, поки користувач не почистить куки браузера, вікно показуватися не буде.
Як ви розумієте, обробник події запису cookie, ви можете прив’язати до будь-якого іншого елементу. Час зберігання cookie встановлюєте в expires: 7 (у прикладі це 7 днів). Затримку появи вікна регулюєте у функції setTimeout, за замовчуванням виставив 5000, т. е вікно спливе через 5 секунд після завантаження сторінки.

Оновлення від 14.11.2013

Зовсім трохи змінив зовнішній вигляд модального вікна, прикрутив просту анімацію появи, з допомогою зміни властивості прозорість (opacity) від 0 до 1. Демо, додав і варіант спливаючого віконця з записом cookie, при перегляді, не забувайте, що вікно в цьому варіанті з’являється 1 раз у 7 днів, так що чистимо куки))).

З приводу оформлення:
Прикладів створення модальних вікон, написав за останній час на невелику колекцію, так що дивіться, вибирайте потрібний стиль і творіть, творіть…

Демо 1 Демо 2Скачать исходники

Тепер сподіваюся точно — Все!

Рекомендую:

bootstrap-video-tuts

Детальніше

З Повагою, Андрій

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: