Як створити спливаюче вікно в Bootstrap: Повний посібник
Спливаючі вікна — це ефективний маркетинговий інструмент з високими показниками конверсії. Ви можете створювати їх самостійно з мінімальними або відсутніми навичками програмування. Давайте дізнаємося, як створити спливаючі вікна та додати їх на вебсайт за допомогою Bootstrap і застосуванням альтернативних готових рішень.
Що таке спливаюче вікно Bootstrap
Спливаюче вікно — це окрема рамка вебсайту, яка відображається поверх решти контенту під час завантаження сайту, тимчасово блокуючи його, щоб привернути увагу до певного повідомлення. Прикладами можуть бути реклама, нагадування про незавершені покупки, пропозиції підписатися на оновлення, запити на збереження файлу тощо.
Bootstrap спливаюче вікно — це безкоштовний набір інструментів, розроблений для створення веб-додатків і сучасних динамічних вебсайтів. Він складається з шаблонів, написаних мовами розмітки HTML та CSS, і розширень на JavaScript.
Таким чином, використовуючи JavaScript, ви можете створювати модальні спливаючі вікна, які прив’язані до певної події, наприклад, коли мишка виходить за межі основної рамки або коли спливає певний час. Використовуючи плагін Bootstrap, ви можете створювати елементи, що виконують такі функції:
- пропонувати перейти до чату або замовити зворотний дзвінок;
- збирати дані для сегментації клієнтів;
- надавати допомогу та довідкову інформацію;
- відображати мультимедійний контент на весь екран;
- просувати продукти та послуги;
- пропонувати зареєструватися для використання всіх функцій сайту;
- допомагати відвідувачу знайти необхідну йому інформацію тощо.
Bootstrap дозволяє створювати зручні та ефективні маркетингові інструменти. Вони допомагають зосередити увагу відвідувача на конкретній пропозиції та привести його до цільової дії. Навіть мінімальні знання зазначених вище мов програмування дають можливість значно підвищити рівень конверсії та покращити фінансові результати бізнесу.
Як створити форму спливаючого вікна в Bootstrap
Створення спливаючого вікна не потребує жодних навичок програмування, оскільки ви можете використовувати готові фрагменти коду з репозиторіїв. Давайте розберемося, як створити спливаюче вікно, використовуючи Bootstrap з мінімальним набором функціональних елементів.
Приклад створення спливаючого вікна Bootstrap
Перш ніж почати створювати форму спливаючого вікна в Bootstrap, вам потрібно переконатися, що ваш вебсайт відповідає вимогам плагіна. Вони повинні враховуватися для кожної конкретної версії інструменту. Наприклад, для підключення поточної версії Bootstrap 5.3, слід використовувати мову розмітки HTML5 з адаптивним дизайном, що дозволяє налаштовувати вікно до параметрів будь-якого екрану.
Найпростіший спосіб активувати Bootstrap — додати фрагмент коду, що містить адреси шаблонів CSS та бібліотек JavaScript у розділ <head>:
<link href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
Ви також можете завантажити готовий дистрибутив з GitHub для інтеграції у ваше середовище розробки. Розробники також пропонують інші варіанти установки, такі як менеджери пакетів.
Як створити спливаюче вікно за допомогою Bootstrap і JavaScript
Розробники Bootstrap пропонують такий приклад для оцінки можливостей їхнього інструменту.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Запустити демо модальне вікно
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Назва модального вікна</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5 class="text-center mb-5">Вставте свій текст тут</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрити</button>
<button type="button" class="btn btn-primary">Зберегти зміни</button>
</div>
</div>
</div>
</div>
Цей фрагмент коду створює невелике спливаюче вікно з текстом і двома кнопками. До нього застосовується проста анімація — рамка спускається зверху, поступово набуваючи рис. Воно закривається при натисканні відповідної кнопки або просто при кліку на тло. У обох випадках вікно піднімається і затемнюється, зникаючи повністю.
Давайте розглянемо цей приклад детальніше.
Виклик спливаючого вікна
У прикладі використовується найпростіший варіант — виклик спливаючого вікна за допомогою кнопки. Це корисно, якщо ви пропонуєте відвідувачеві форму реєстрації або допомогу щодо використання певної функції. Наступний фрагмент відповідає за запуск коду:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Запустити демо модальне вікно
</button>
Хочете, щоб вікно відкривалося автоматично? Тоді вам доведеться звернутися до вивчення JavaScript. Наприклад, ви можете використати наступний скрипт для запуску функції через 2 секунди після завантаження сторінки:
$(window).load(function(){
setTimeout(function(){
$('#myModal').modal('show');
}, 2000);
});
Інший популярний варіант — виклик спливаючого вікна, коли курсор миші виходить за межі головної рамки дисплея. Зрозумівши, що користувач збирається закрити вкладку, покажіть йому фінальне повідомлення. Для цього використовується наступний скрипт:
<script>
function addEvent(obj, evt, fn) {
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evt, fn);
} } addEvent(document, 'mouseout', function (evt) {
var modalId = 'exitModal';
if (evt.toElement === null && evt.relatedTarget === null && !localStorage.getItem('modal.' + modalId)) {
var modal = new bootstrap.Modal('#' + modalId);
modal.show();
localStorage.setItem('modal.' + modalId, '1');
}
});
</script>
Блок "Modal"
Отже, як зробити адаптивне модальне вікно у bootstrap.
Спливаюче вікно в нашому прикладі складається з трьох частин:
- заголовок з назвою;
div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Назва модального вікна</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
- головне вікно з текстовим описом;
<div class="modal-body">
<h5 class="text-center mb-5">Вставте ваш текст тут</h5>
</div>
- підвал з кнопками.
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрити</button>
<button type="button" class="btn btn-primary">Зберегти зміни</button>
</div>
Ця категоризація є стандартною для спливаючих вікон, створених з використанням Bootstrap. Проте, ви можете заповнити кожну частину на свій розсуд, використовуючи численні функціональні елементи з бібліотек плагінів.
Модифікації спливаючого вікна
Описаний вище код буде достатнім для створення простих маркетингових інструментів. Але ви можете отримати набагато більше, налаштувавши рамки.
Наприклад, наступний фрагмент коду дозволяє встановити певний розмір спливаючого вікна:
<div class="modal-dialog modal-OO">...</div>,
де OO — це змінна, яка вказує потрібний формат і може приймати такі значення:
- sm — відповідає ширині 320 пікселів;
- lg — 800 пікселів;
- xl — 1140 пікселів.
Якщо пропустити змінну розміру, за замовчуванням на екрані з'явиться спливаюче вікно шириною 500 пікселів. Щоб розтягнути рамку на весь екран, використовуйте наступний код:
<div class="modal-dialog modal-fullscreen">
Якщо ви хочете змінити анімацію спливаючого вікна, зверніть увагу на змінну modal-fade. Бібліотеки Bootstrap пропонують різноманітні ефекти. Наприклад, якщо ви хочете, щоб рамка наближалася, як зум камери, вставте наступний фрагмент коду:
<div class="modal fade2" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Щоб анімація працювала правильно, вам також потрібно налаштувати стилі CSS і створити відповідний скрипт:
.fade2 {
transform: scale(0.9);
opacity: 0;
transition: all .2s linear;
display: block !important;
}
.fade2.show {
opacity: 1;
transform: scale(1);
}
і
$('#exampleModal').modal();
function afterModalTransition(e) {
e.setAttribute("style", "display: none !important;");
}
$('#exampleModal').on('hide.bs.modal', function (e) {
setTimeout( () => afterModalTransition(this), 200);
})
Ще однією цікавою функцією, доступною у Bootstrap, є блокування спливаючого вікна. Це не дозволяє закрити рамку, натиснувши на фон або натиснувши Esc. Щоб перейти до вмісту сайту, користувач повинен виконати цільову дію, наприклад, зареєструватися після закінчення пробного періоду. У цьому випадку використовується наступний код:
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
Як створити спливаюче вікно за допомогою Claspo
Якщо вам потрібен яскравіший і більш вражаючий візуальний елемент, ви можете використовувати готове рішення для створення спливаючих вікон.
Одним із найзручніших варіантів є інструмент Claspo.io. Він дозволяє створювати спливаючі вікна будь-якої складності без знання мов програмування — вони створені за принципом "конструктора", перетягуючи різні елементи на екран. Давайте більше дізнаємось про створення спливаючого вікна за допомогою Claspo.
Крок 1: Реєстрація
Перейдіть на Claspo і створіть обліковий запис. Ви також можете увійти за допомогою соціальних мереж або свого облікового запису Google.
Виберіть відповідний тарифний план. Ви можете ознайомитися з функціональністю Claspo безкоштовно — в цьому випадку доступні три віджети на одному сайті з загальною кількістю переглядів до 30 тисяч на місяць. Крім того, спливаюче вікно забезпечить посилання на вебінструмент.
Тарифні плани Claspo є доступними та гнучкими в порівнянні з іншими сервісами. Оберіть найкращий варіант для вашого бізнесу без переплати за зайві функції та перегляди.
Крок 2: створення спливаючого вікна
Claspo проводить вас через наступні кроки:
- визначення мети — зазначте, яку функцію ви хочете реалізувати;
- вибір формату — класичне вікно, банер, плаваюча рамка тощо;
- настроювання стилю — оберіть дизайн, який відповідає дизайну вашого сайту;
- вибір шаблону — спливаюче вікно набуває завершеної форми;
- контент — перетягуйте функціональні елементи на рамку, вводьте текст, додавайте зображення тощо.
Перевага інструменту полягає в тому, що за кілька хвилин ви можете створити не просто базове вікно з текстом, а яскравий візуальний елемент, який привертає увагу відвідувача та забезпечує високий показник конверсії.
Крок 3: інтеграція
Коли ви створюєте спливаюче вікно, ви отримуєте скрипт, який посилається на власні бібліотеки Claspo. Ви можете інтегрувати його самостійно — інструмент надає готовий код і допомагає знайти, де його вставити. Доступна також інтеграція з більшістю популярних систем управління контентом (CMS), включаючи WordPress.
Крок 4: запуск
Після інтеграції у код вашого сайту, поп-ап почне працювати негайно. Керуйте ним у веб-інтерфейсі Claspo, змінюючи налаштування при необхідності та отримуючи детальну статистику. Інструмент також сумісний з CRM та іншим корпоративним програмним забезпеченням. Його глибока інтеграція дозволяє створювати персоналізовані пропозиції для кожного відвідувача сайту на основі історії активності або сегментації за різними характеристиками.
Як швидко створити поп-ап вікно на сайті: висновок
Використовуючи поп-ап Bootstrap, ви можете швидко створювати вікна, гнучко керуючи їхнім змістом, розмірами, функціями та навіть анімаціями відображення. Основних навичок програмування буде достатньо для виконання найпростіших завдань, оскільки більшість коду можна взяти з відкритих репозиторіїв, таких як GitHub.
Але якщо ви шукаєте ефективний інструмент для конверсії вашого сайту, варто скористатися готовим рішенням Claspo. Ви можете швидко та легко створювати яскраві та функціональні поп-апи без будь-яких знань коду! Вони збираються за принципом конструктора, вибираючи дизайн та зміст, і інструмент адаптує їх до всіх пристроїв, екранів і браузерів.
Ви можете спробувати всі функції Claspo безкоштовно! Зареєструйтесь зараз, щоб оцінити потенціал інструменту та вибрати найкращу версію смарт поп-апів для вашого бізнесу!
