Как создать всплывающее окно в 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>
- footer с кнопками.
<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 бесплатно! Зарегистрируйтесь сейчас, чтобы оценить потенциал инструмента и выбрать лучшую версию умных всплывающих окон для вашего бизнеса!
