Від автора: спливаюче вікно для сайту це річ, яку багато користувачів від душі ненавидять. Але все ж якщо використовувати його з дозволу самого користувача, то це перетворюється на досить цікавий елемент сайту. У цій статті я як раз я розповім вам про три способи, як зробити спливаюче вікно.
Спосіб №1 – на чистому html5 і javascript
Як не дивно, сьогодні таке вікно можна зробити без всяких jquery плагіни. Для цього нам буде потрібно елемент з html5 – dialog.
Це вікно, яке зроблено на html5 і javascript
Закрити
Відкрити спливаюче вікно!
Чим буде добре цей спосіб? По-перше, блок відкривається тільки за бажанням користувача. Тобто тільки в тому випадку, якщо він сам натискає на кнопку. Також він у будь-який час може закрити віконце і ніколи більше його не відкривати. Природно, це тільки розмітка, щоб все працювало, потрібно додати ще javascript. В розмітці в контейнері dialog може бути все, що завгодно: картинки, таблиці, відео і т. д. Абзац там тільки для прикладу.
Обов’язково у спливаючому вікні повинна бути кнопка його закриття. Добре, з розміткою розібралися, а от і скрипт:
var dialog = document.querySelector(‘dialog’);
document.querySelector(‘#show’).onclick = function() {
dialog.show();
};
document.querySelector(‘#close’).onclick = function() {
dialog.close();
};
Відмінно. У такому форматі варто вставляти код в html-файл, або ж ви можете скопіювати цей код (крім тегів script) в окремий javascript-файл і підключити його до html. Дивіться самі, як вам зручніше. Ось так виглядає сторінка, якщо її відкрити в браузері:
У мене лише одна кнопка, але в реальному прикладі це був би який-небудь сайт, і там де-небудь в віджеті була б кнопка для висновку спливаючого вікна. Ну а так виглядає саме вікно:
Як бачите, його можна в будь-який момент закрити. У мене воно виглядає нестандартно, так як я додав деякі стилі селектору dialog:
dialog{
border-radius: 20px;
background: yellow;
}
Стилів мало, вони скоріше для виду, але в реальній практиці ви могли б стилізувати спливаюче вікно так, як вам треба.
Надаємо модальні властивості
Все добре, але це вікно не модальне, тобто при його відкритті інші елементи не блокуються і за ним теж можна натискати, можна виділяти текст і т. д. Щоб зробити його модальним, шукаємо в скрипті рядок:
dialog.show();
І міняємо її на:
dialog.showModal();
А щоб фон при відкритті модального вікна затемнялся, додайте такий код в css:
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.8);
}
Відкрийте і ви побачите різницю, всі інші елементи на сторінці будуть заблоковані, поки ви не закриєте блок за допомогою відповідної кнопки.
Мінус виведення спливаючого вікна на html5 в тому, що dialog підтримується дуже погано. Звичайно, зараз я вам все показував в останній версії Google Chrome і тут все чудово працює, але в цілому тег підтримується слабо, хоча можна підключити polyfill спеціально для цього елемента.
Так, зайшов я тут на caniuse.com підтримує тег тільки Chrome і Opera на поточний момент.
Варіант для тих, у кого WordPress
Якщо у вас WordPress і ви хочете рішення у вигляді готового простого плагіна, то воно є. Цей плагін називається WP Tactical Popup і в ньому дуже багато налаштувань. Наприклад, можна вказати кількість переглянутих сторінок користувачем, після яких з’явиться вікно, можна вказати таймер, по закінченню якого воно з’явиться. Також є можливість вказувати інтервал показу одній людині, щоб сильно не дратувати. Загалом, на мій погляд, це просто дуже гарний готове рішення.
У модальне вікно можна вставити html-код, картинку або форму підписки.
Варіант 3 – на фреймворку Bootstrap
У Bootstrap підтримує jquery-плагін modal.js. Якщо ви використовуєте цей фреймворк у своїй верстці, то оптимально створювати красиве спливаюче вікно саме з його допомогою. Для початку вам буде потрібно: завантажити безкоштовно і підключити Bootstrap, завантажити і підключити jQuery
Розмістити потрібний код на потрібній сторінці, після чого написати невеликий веб-сценарій. Докладний опис цього способу з прикладом ви можете знайти на сайті http://bootstrap-ru.com. Мабуть, це і буде самий оптимальний спосіб.
Що ж, ми розглянули три способи створення спливаючого вікна, а якщо ви хочете краще розібратися в javascript, то рекомендую до перегляду наш курс по цій мові, а також найвідомішою його бібліотеці jQuery.
