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

Push-уведомления для посетителей с всплывающим сообщением, легким и легко настраиваемым предупреждающим сообщением.

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

Обзор

Что нужно знать при использовании плагина всплывающих сообщений:

Если Вы создаете наш JavaScript из исходного кода, для него требуется util.js.
Всплывающие сообщения выбраны из соображений производительности, поэтому Вы должны инициализировать их самостоятельно.
Обратите внимание, что Вы несете ответственность за размещение всплывающих сообщений.
Всплывающие сообщения будут автоматически скрываться, если Вы не укажете autohide: false.

Эффект анимации этого компонента зависит от медиазапроса prefers-reduced-motion. См. Раздел с уменьшенным движением в нашей документации по специальным возможностям.

Примеры

Простой

Чтобы поощрять расширяемые и предсказуемые всплывающие сообщения, мы рекомендуем заголовок и тело. Заголовки всплывающих сообщений используют display: flex, что позволяет легко выравнивать контент благодаря нашим утилитам полей и флексбок.

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

Привет, мир! Это всплывающее сообщение.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 минут назад</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>

Live

Нажмите кнопку ниже, чтобы отобразить всплывающее уведомление (расположенное с нашими утилитами в правом нижнем углу), которое по умолчанию скрыто с помощью .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Показать лайв тост</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 мин назад</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Привет, мир! Это тост-сообщение.
    </div>
  </div>
</div>

Translucent

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

Привет, мир! Это всплывающее сообщение.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 минут назад</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>

Укладка

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

Увидеть? Именно так.

Внимание, всплывающие сообщения складываются автоматически

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">прямо сейчас</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Увидеть? Именно так.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 секунды назад</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Внимание, всплывающие сообщения складываются автоматически
  </div>
</div>

Размещение

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

Привет, мир! Это всплывающее сообщение.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 минут назад</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Привет, мир! Это всплывающее сообщение.
    </div>
  </div>
</div>

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

Увидеть? Именно так.

Внимание, всплывающие сообщения складываются автоматически

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Расположите это -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">прямо сейчас</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Увидеть? Именно так.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 секунды назад</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Внимание, всплывающие сообщения складываются автоматически
      </div>
    </div>
  </div>
</div>

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

Привет, мир! Это всплывающее сообщение.

<!-- Контейнер Flexbox для выравнивания всплывающих сообщений -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Затем положите всплывающие сообщения внутрь -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 минут назад</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Привет, мир! Это всплывающее сообщение.
    </div>
  </div>
</div>

Доступность

Тосты предназначены для небольшого прерывания ваших посетителей или пользователей, поэтому, чтобы помочь тем, у кого есть программы чтения с экрана и аналогичные вспомогательные технологии, вы должны поместить свои всплывающие уведомления в области aria-live. Изменения в активных регионах (такие как внедрение/обновление компонента всплывающего уведомления) автоматически объявляются программами чтения с экрана без необходимости перемещать фокус пользователя или иным образом прерывать его. Кроме того, включите aria-atomic="true", чтобы гарантировать, что все всплывающее уведомление всегда объявляется как единая (атомарная) единица, а не просто объявляет, что было изменено (что может привести к проблемам, если вы обновите только часть всплывающего уведомления). содержимого или при отображении того же содержимого всплывающего уведомления в более поздний момент времени). Если необходимая информация важна для процесса, т.е. для списка ошибок в форме используйте компонент уведомления вместо всплывающего уведомления.

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

Вам также необходимо адаптировать уровни role и aria-live в зависимости от контента. Если это важное сообщение, например, ошибка, используйте role="alert" aria-live="assertive", в противном случае используйте атрибуты role="status" aria-live="polite".

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

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

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

Привет, мир! Это всплывающее сообщение.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 минут назад</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Закрыть">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Привет, мир! Это всплывающее сообщение.
  </div>
</div>

Хотя технически возможно добавить в всплывающее уведомление элементы управления с фокусом или действием (например, дополнительные кнопки или ссылки), этого следует избегать для автоматического скрытия всплывающих уведомлений. Даже если вы установите всплывающее уведомление на длительный таймаут delay, пользователям клавиатуры и вспомогательных технологий может быть трудно добраться до всплывающего уведомления вовремя, чтобы предпринять какие-либо действия (поскольку всплывающие уведомления не получают фокуса при отображении). . Если вам абсолютно необходимы дополнительные элементы управления, мы рекомендуем использовать всплывающее уведомление с autohide: false.

Поведение JavaScript

Применение

Инициализация всплывающего сообщения с помощью JavaScript:

$('.toast').toast(option)

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-, как в data-animation="".

Название	Тип	По умолчанию	Описание
animation	boolean	true	Применить переход CSS fade к всплывающему сообщению
autohide	boolean	true	Автоматически скрывать всплывающее сообщение
delay	number	`500`	Задержка скрытия всплывающего сообщения (мс)

Методы

Асинхронные методы и переходы

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

Дополнительную информацию см. в нашей документации по JavaScript.

`$().toast(options)`

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

`.toast('show')`

Показывает всплывающее сообщение элемента. Возврат к вызывающей стороне до того, как всплывающее сообщение было фактически показано (то есть до того, как произойдет событие shown.bs.toast). Вы должны вручную вызвать этот метод, вместо этого Ваше всплывающее сообщение не будет отображаться.

$('#element').toast('show')

`.toast('hide')`

Скрывает всплывающее сообщение элемента. Возврат к вызывающей стороне до того, как всплывающее сообщение было фактически скрыто (то есть до того, как произойдет событие hidden.bs.toast). Вы должны вызвать этот метод вручную, если Вы сделали autohide равным false.

$('#element').toast('hide')

`.toast('dispose')`

Скрывает всплывающее сообщение элемента. Ваше всплывающее сообщение останется в DOM, но больше не будет отображаться.

$('#element').toast('dispose')

События

Тип события	Описание
show.bs.toast	Это событие запускается немедленно при вызове метода экземпляра `show`.
shown.bs.toast	Это событие запускается, когда всплывающее сообщение становится видимым для пользователя.
hide.bs.toast	Это событие запускается сразу после вызова метода экземпляра `hide`.
hidden.bs.toast	Это событие запускается, когда всплывающее сообщение перестает быть скрытым от пользователя.

$('#myToast').on('hidden.bs.toast', function () {
  // сделайте что-нибудь...
})