Bootstrap: всплывающие сообщения

4 минуты на чтение

Всплывающие сообщения являются аналогом push-уведомлений, точнее имитируют их работу. Сообщения появляются (“всплывают”) поверх остального контента, применяются для вывода различного рода информации, или для оповещения пользователей о состоянии текущих процессов.

Содержание
  1. Быстрый старт с Bootstrap
  2. Параметры и особенности
  3. Пример #1

Быстрый старт с Bootstrap

Bootstrap позволяет быстро организовать вывод всплывающих сообщений (toasts). Минимальная необходимая разметка для этого:

Перед началом работы с сообщениями Bootstrap следует подключить саму библиотеку Bootstrap (стили и  скрипты). Также следует учесть, что всплывающие сообщения необходимо инициализировать , так как по умолчанию они отключены. Для инициализации необходимо указать в JavaScript:

Данная строка инициализирует и выводит все всплывающие сообщения на странице.

Параметры и особенности

Если выводится несколько всплывающих сообщений, они выводятся в стек, т.е. располагаются друг под другом автоматически.

По умолчанию, сообщения автоматически исчезают через определенное время (по умолчанию 500мс), для того чтобы отключить эту опцию необходимо в теге с классом toast указать атрибут:

Время активности, при включенной опции автоматического исчезновения, задается атрибутом

Также доступно отключение анимации (включена по умолчанию) через атрибут

Данные параметры также можно задать через JavaScript:

Есть возможность позиционирования области вывода сообщений, для этого можно обернуть сообщения в блок, и определить его положение на странице (см. Пример #1).

Пример #1

See the Pen
WOV 20190813 by Paul (@1110000)
on CodePen.

Facebook Vk Ok Twitter Telegram

Похожие записи:

Продолжим верстку ранее начатого макета на Bootstrap 4, подробнее здесь. Рассмотрим как разбить макет на секции, оформить их и сделать более удобной прокрутку на сайте. Техническое задание Функционал: плавная прокрутка Требования к верстке: г...
С учетом возрастания количества, а в некоторых случаях преобладания, на сайтах посетителей, заходящих с мобильных устройств, адаптивное меню становится обязательной составляющей сайта. Bootstrap 4 включает отличный инструмент для создания  адаптивного меню – к...
Модальные окна, такие полезные, а иногда, такие надоедливые, являются популярным элементом пользовательского интерфейса. Модальное окно – это окно, блокирующее работу с приложением, до тех пор пока его не закроют. Область применения достаточно велика: диалогов...