Всплывающее сообщение bootstrap 5

Обновлено: 28.04.2024

Обучение основам Bootstrap (5) - окно настройки дизайна плагинов Bootstrap

5. Окно приглашения Bootstrap

Окно приглашения Bootstrap включает три категории: окно с подсказкой, окно с предупреждением и всплывающее окно.

Плагин всплывающей подсказки

Плагин Tooltip вдохновлен jQuery.tipsy, написанным Джейсоном Фреймом. Плагин Tooltip) внес много улучшений, например, ему не нужно полагаться на изображения, вместо этого он использует CSS для достижения эффектов анимации и использует атрибут data для хранения информации заголовка.

Плагин Tooltip генерирует контент и разметку в соответствии с требованиями.По умолчанию подсказка находится за элементом триггера. Вы можете добавить всплывающие подсказки двумя способами:

Через атрибут данных: Чтобы добавить всплывающую подсказку, просто добавьте метку привязкиdata-toggle="tooltip"Хорошо. Название якоря - это текст подсказки. По умолчанию плагин устанавливает всплывающую подсказку вверху.
Через JavaScript: Всплывающая подсказка через JavaScript:

Плагин Tooltip - это не просто плагин CSS, как выпадающие меню и другие плагины, которые обсуждались ранее. Чтобы использовать плагин, вы должны активировать его с помощью jquery (читайте javascript). Используйте следующий скрипт для включения всех всплывающих подсказок на странице:

Плагин Popover

Popover похож на Tooltip и предоставляет расширенный вид. Чтобы активировать всплывающее окно, пользователю нужно только навести курсор на элемент. Содержимое всплывающего окна может быть полностью заполнено с помощью API данных Bootstrap (Bootstrap Data API). Этот метод опирается на подсказки.

Если вы хотите обратиться к функции плагина отдельно, то вам нужно обратиться к popover.js, который зависит от плагина Tooltip. Или, как упоминалось в главе обзора плагинов Bootstrap, вы можете сослаться на bootstrap.js или сжатую версию bootstrap.min.js.

использование

Плагины Popover генерируют контент и теги в соответствии с требованиями. По умолчанию всплывающие окна размещаются за элементами триггера. Есть два способа добавить поповер (popover):

Через атрибут данных: Чтобы добавить поповер, просто добавьте метку привязки / кнопкиdata-toggle="popover"Хорошо. Название якоря - это текст всплывающего окна. По умолчанию плагин устанавливает поповер вверх.
С помощью JavaScript:Включить поповер через JavaScript:

Плагин Popover не является чистым плагином CSS, как выпадающие меню и другие плагины, обсуждавшиеся ранее. Чтобы использовать плагин, вы должны активировать его с помощью jquery (читайте javascript). Используйте следующий скрипт для включения всех всплывающих окон на странице:

Плагин оповещения

Всплывающие подсказки – это фрагменты текста маркера, которые появляются при наведении указателя мыши на гиперссылку. В Bootstrap 5 есть определенные вещи, о которых вы должны позаботиться, прежде чем пытаться добавить всплывающую подсказку. Если вы заметили, что стартовый шаблон содержит новую стороннюю библиотеку JavaScript под названием Popper. Это в основном используется для компонента всплывающей подсказки для позиционирования.

Это руководство охватывает следующие главы:

Основы всплывающих подсказок Bootstrap 5
Инициализация всплывающей подсказки
Использование всплывающей подсказки с тегом привязки
Размещение всплывающих подсказок
Использование всплывающей подсказки с кнопками
Добавление HTML-содержимого во всплывающую подсказку
Параметры настройки

1 Основы всплывающих подсказок Bootstrap

Всплывающие подсказки – это компонент JavaScript, поэтому вы должны включить файлы bootstrap.min.js в свой HTML-шаблон. В качестве альтернативы вы также можете использовать комбинированный файл сценария bootstrap.bundle.min.js.
Также для правильного размещения всплывающих подсказок вы должны включить popper.min.js во весь исходный код.
Всплывающие подсказки не загружаются по умолчанию из-за производительности загрузки страницы. Следовательно, необходимо инициализировать родительский элемент для загрузки на страницу.
Последовательность файлов сценария должна быть popper.min.js, bootstrap.min.js, а затем сценарий инициализации.
Во всплывающих подсказках не используются изображения, и концепция основана на всплывающих подсказках в стиле Facebook, созданных с помощью плагина Tipsy jQuery.
Всплывающая подсказка с нулевой длиной заголовка отображаться не будет.
Bootstrap использует CSS-анимацию и атрибуты данных для управления поведением всплывающих подсказок.

2 Инициализация всплывающих подсказок в Bootstrap

В отличие от других компонентов Bootstrap, всплывающие подсказки должны быть инициализированы перед использованием. Вы можете добавить глобальную инициализацию, как показано ниже, или использовать инициализацию на уровне конкретного элемента, если это необходимо.

Ниже приведен код для активации всплывающей подсказки на уровне элемента привязки.

Ниже приведен код для использования кнопки для инициализации:

Помните, что этот код сценария должен быть добавлен сразу после ссылок popper.min.js и bootstrap.min.js, чтобы всплывающая подсказка работала должным образом. Вы можете проверить формат стартового шаблона здесь.

3 Использование всплывающей подсказки к тегу привязки

Давайте сначала создадим простую всплывающую подсказку, используя тег привязки. Код должен выглядеть так:

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

Результат должен выглядеть в браузере при наведении курсора мыши, как показано ниже:

4 подсказки для позиционирования

Как вы видите в приведенном выше примере, по умолчанию всплывающая подсказка располагается поверх содержимого. Bootstrap позволяет размещать текст привязки сверху, слева, справа и снизу с помощью атрибута размещения данных.

Используйте data-place = "top" для верхней позиции. Это значение по умолчанию, поэтому вам не нужно явно указывать.
Используйте data-place = "bottom" для нижней позиции.
Используйте data-place = "right" для правильного положения.
Используйте data-location = "left" для левой позиции.

5 всплывающих подсказок на кнопках

Давайте создадим четыре всплывающих подсказки с разными позициями на компоненте кнопки.

Результат в браузере должен выглядеть следующим образом:

6 Использование содержимого HTML внутри всплывающей подсказки

По умолчанию всплывающая подсказка поддерживает только текстовое содержимое внутри. Вы можете добавлять HTML- теги с помощью атрибута data-html sds-scrivo-highlighter">

Как видите, содержимое внутри тега title обрабатывается с помощью тегов HTML, если установлен атрибут data-html = “true”. Вот как это будет выглядеть в браузере:

7 Параметры настройки всплывающей подсказки

Отключите эффект затухания CSS, добавив атрибут data-animation = “false”.
Задержка показа и скрытия с атрибутом задержки данных.
Сдвинуть всплывающую подсказку от элемента, используя смещение данных.

Вы можете сослаться на другие примеры всплывающих подсказок с сайта Popper JavaScript.

Примечание. Всплывающие подсказки Bootstrap 5 не будут работать в IE8 или более ранних версиях, так как браузер не поддерживает popper.

В основном, модальное окно — это диалоговое или всплывающее окно, которое используется для предоставления важной информации пользователю или побуждения пользователя предпринять необходимые действия, прежде чем двигаться дальше. Модальные окна широко используются для предупреждения пользователей о таких ситуациях, как истечение времени сеанса или получение их окончательного подтверждения перед выполнением каких-либо критических действий, таких как сохранение или удаление важных данных. Мне довольно часто приходится использовать модальные окна для вывода различных форм, таких как например формы обратной связи.

Базовый код модального окна

Bootstrap 3 против Bootstrap 4 и 5 предупреждений

В Bootstrap версии 3 было четыре цветных предупреждения, но в Bootstrap версий 4 и 5 всего 8 типов предупреждений. Ниже приведен список контекстных классов, используемых в версиях Bootstrap 5.

Выделенные четыре типа добавлены недавно, начиная с версии 4.

Оповещения Bootstrap

Использование различного содержания в предупреждениях

Вы можете использовать большинство HTML-элементов в окнах предупреждений, используя специальные классы для заголовков и ссылок. Используйте теги HTML по умолчанию для абзацев и других элементов типографики. Давайте создадим абзац с заголовком и образцом изображения внутри окна предупреждения об успехе.

Окно предупреждения будет выглядеть следующим образом:

Настройка цветов ссылок в предупреждениях

Окончательный результат должен выглядеть так:

Оповещения Bootstrap 5

Добавление кнопки закрытия или отклонения в оповещения

Ниже приведен код запрещенного предупреждения:

Объяснение классов и атрибутов, используемых для создания оповещения с кнопкой закрытия:

Использование JavaScript для отклонения

Окно предупреждения можно закрыть вручную с помощью триггера JavaScript, как показано ниже:

Сценарий оповещения начальной загрузки имеет следующие два события:

Мероприятие	Описание
close.bs.alert	Это срабатывает сразу после нажатия кнопки закрытия.
closed.bs.alert	Это срабатывает, когда предупреждение закрывается.

Ниже приведен код для создания предупреждения при нажатии кнопки закрытия.

Точно так же вы можете использовать событие closed.bs.alert для запуска всплывающего окна при закрытии предупреждения.

Использование значков в предупреждениях

Глификоны не поддерживаются в Bootstrap 4, но вы можете использовать значки Bootstrap, значки font awesome или любые другие значки SVG с компонентом предупреждения.

Использование значков Bootstrap

Версия 5 содержит 1330+ встроенных значков в формате SVG и веб-шрифтов. Это лучший вариант, так как он прекрасно сочетается с другими элементами. Ниже приведен пример использования значка Bootstrap с компонентом предупреждения.

Ниже показано, как это будет выглядеть в браузере.

Использование Font Awesome с предупреждениями Bootstrap

Ниже приведены некоторые примеры использования значка font awesome с предупреждением. Прочтите отдельную статью о том, как использовать отличные шрифтовые иконки с предупреждениями.

Использование изображения значка с предупреждениями

Размещение значков шрифтов на вашем собственном сайте может быть сложной задачей. В таком случае вместо значков шрифтов вы можете использовать небольшие изображения перед компонентами предупреждений, как показано ниже.

Читайте также: