1. розмітка HTML
2. стилі CSS
3. закриваємо вікно
4. А може і це вам буде цікаво:
5. Оновлено 27.10.2017:

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

Мене більше зацікавила технічна сторона питання і методи його вирішення. Придумувати особливо нічого не довелося, все давно придумано і прекрасно працює. Сьогодні разом з вами, ми розберемо детально, як найпростіше реалізувати модальне вікно спливаюче при завантаженні сайту, використовуючи в роботі магію нових властивостей CSS3 і зовсім невеликого 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 = "https://placeimg.com/320/320/tech"> </ div> <p> Передбачена можливість використання вбудованих мініатюр, розташованих зліва або праворуч, в окремому div-контейнері з виділеним класом .pl-left і .pl-right відповідно. </ p> <div class = "pl-right"> <img src = "https://placeimg.com/320/ 320 / nature "> </ 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); }

Для кнопки закриття ми встановили колір фону і ступінь його прозорості. Визначили положення, розмір і насиченість тексту, додали трохи ефекту тіні для тексту. Потім визначаємо позицію кнопки, ширину і колір рамки, а за допомогою властивості заокруглення рамки, робимо нашу кнопку круглої, і для більшої виразності додамо легку тінь. На завершення, визначаємося зі зміною кольору фону при наведенні курсору миші на кнопку.

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

Поважайте своїх користувачів і вони до вас потягнуться.

А може і це вам буде цікаво:

Деякі додавання:

Після написання статті, найпопулярніше питання в коментарях - як прикрутити до цього вікна запис 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, а можна завантажити 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 секунд після завантаження сторінки.

Оновлено 27.10.2017:

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

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

Втомилися від пошуку першокласних русифікованих шаблонів? В такому випадку, вам дійсно варто відвідати маркетплейс TemplateMonster, де тепер можна знайти найрізноманітніші для самих різних сфер діяльності. Локалізовані шаблони порадують вас у всіляких аспектах. Звичайно ж, мова йде про різноманітні інструменти, які зроблять процес створення сайту більш швидким і простим. До того ж, не варто забувати, що тексти для даних шаблонів були написані вручну.

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

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