Cмотреть на GitHub

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

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

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

Обзор

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

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

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

Примеры

Основной

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

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

<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>

Полупрозрачность

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

<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.

Bootstrap 11 минут назад
Привет, мир! Это всплывающее сообщение. 
<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", чтобы гарантировать, что весь тост всегда объявляется как единое (атомарное) устройство, вместо того, чтобы объявлять, что было изменено (что может привести к проблемам, если вы обновляете только часть содержимого тоста, или если отображение того же содержимого тоста в более поздний момент времени). Если необходимая информация важна для процесса, например, для списка ошибок в форме, затем используйте компонент уведомления вместо всплывающего сообщения.

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

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

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

<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>

Поведение JavaScript

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

Инициализация всплывающих сообщений через JavaScript:

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

Опции

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

Имя Тип По умолчанию Описание
animation boolean true Применить переход CSS исчезновения к всплывающему сообщению
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 () {
  // сделайте что-нибудь...
})