Всплывающие сообщения являются аналогом push-уведомлений, точнее имитируют их работу. Сообщения появляются (“всплывают”) поверх остального контента, применяются для вывода различного рода информации, или для оповещения пользователей о состоянии текущих процессов.
Содержание
- Быстрый старт с Bootstrap
- Параметры и особенности
- Пример #1
Быстрый старт с Bootstrap
Bootstrap позволяет быстро организовать вывод всплывающих сообщений (toasts). Минимальная необходимая разметка для этого:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="toast shadow-lg" data-autohide="false"> <div class="toast-header bg-secondary p-2"> <strong class="mr-auto text-light">Всплывающее сообщение</strong> <button type="button" class="mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body p-2"> Сообщение появится при загрузке страницы. </div> </div> |
Перед началом работы с сообщениями Bootstrap следует подключить саму библиотеку Bootstrap (стили и скрипты). Также следует учесть, что всплывающие сообщения необходимо инициализировать , так как по умолчанию они отключены. Для инициализации необходимо указать в JavaScript:
|
1 |
$('.toast').toast('show'); |
Данная строка инициализирует и выводит все всплывающие сообщения на странице.
Параметры и особенности
Если выводится несколько всплывающих сообщений, они выводятся в стек, т.е. располагаются друг под другом автоматически.
По умолчанию, сообщения автоматически исчезают через определенное время (по умолчанию 500мс), для того чтобы отключить эту опцию необходимо в теге с классом toast указать атрибут:
|
1 |
data-autohide="false" |
Время активности, при включенной опции автоматического исчезновения, задается атрибутом
|
1 |
data-delay="3000" |
Также доступно отключение анимации (включена по умолчанию) через атрибут
|
1 |
data-animation="false" |
Данные параметры также можно задать через JavaScript:
|
1 2 3 4 5 |
$('.toast').toast({ animation:true, autohide:true, delay:5000 }) |
Есть возможность позиционирования области вывода сообщений, для этого можно обернуть сообщения в блок, и определить его положение на странице (см. Пример #1).
Пример #1
See the Pen
WOV 20190813 by Paul (@1110000)
on CodePen.
