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

Обзор

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

• Всплывающие окна полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать bootstrap.bundle.min.js / bootstrap.bundle.js, который содержит Popper.js, чтобы всплывающие окна работали!
• Всплывающие окна требуют [плагина всплывающей подсказки]](/docs/5.1/components/tooltips/) в качестве зависимости.
• Всплывающие окна выбираются из соображений производительности, поэтому Вы должны инициализировать их самостоятельно.
• Значения title и content нулевой длины никогда не будут показывать всплывающее окно.
• Укажите container: 'body' чтобы избежать проблем с рендерингом в более сложных компонентах (например, в наших группах ввода, группах кнопок и т.д.).
• Запуск всплывающих окон для скрытых элементов не работает.
• Всплывающие окна для элементов .disabled или disabled должны запускаться на элементе оболочки.
• При запуске из якорей, которые переносятся по нескольким строкам, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap на Ваших <a>, чтобы избежать такого поведения.
• Всплывающие окна необходимо скрыть до того, как соответствующие им элементы будут удалены из DOM.
• Всплывающие окна могут запускаться благодаря элементу внутри теневой DOM.

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

Пример: Включить всплывающие окна везде

Один из способов инициализировать все всплывающие окна на странице - выбрать их по атрибуту data-bs-toggle:

var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Пример: Использование опции container

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

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Пример

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Заголовок всплывающего сообщения" data-bs-content="А вот и потрясающий контент. Это очень интересно. Правильно?">Нажмите, чтобы переключить всплывающее окно</button>

Четыре направления

Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Направления зеркалируются при использовании Bootstrap в RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Верхнее всплывающее окно">
  Всплывающее окно вверху
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Правое всплывающее окно">
  Всплывающее окно справа
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Нижнее всплывающее окно">
  Всплывающее окно внизу
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Левое всплывающее окно">
  Всплывающее окно слева
</button>

Отклонить при следующем нажатии

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

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Отклоняемое всплывающее окно" data-bs-content="А вот и потрясающий контент. Это очень интересно. Правильно?">Отклоняемое всплывающее окно</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  trigger: 'focus'
})

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть по ним, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути Вы захотите запускать всплывающее окно из оболочки <div> или <span>, в идеале сделанной с фокусировкой на клавиатуре, используя tabindex="0".

Для отключенных триггеров всплывающего окна Вы также можете предпочесть data-bs-trigger="hover focus", чтобы всплывающее окно отображалось как немедленная визуальная обратная связь для ваших пользователей, поскольку они могут не ожидать клик на отключенный элемент.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Отключенная кнопка</button>
</span>

Sass

Переменные

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

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

Включить всплывающие окна через JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Параметры

Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в data-bs-, как в data-bs-animation="". Обязательно измените тип case имени параметра с camelCase на kebab-case при передаче параметров через атрибуты данных. Например, вместо использования data-bs-customClass="beautifier" используйте data-bs-custom-class="beautifier".

Использование функции с popperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

show

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

myPopover.show()

hide

Скрывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически скрыто (т.е. до того, как произойдет событие hidden.bs.popover). Это считается “ручным” запуском всплывающего окна.

myPopover.hide()

toggle

Переключает всплывающее окно элемента (Удаляет сохраненные данные в элементе DOM). Возврат к вызывающей стороне до того, как всплывающее окно было фактически показано или скрыто (то есть до того, как произойдет событие shown.bs.popover или hidden.bs.popover). Это считается “ручным” запуском всплывающего окна.

myPopover.toggle()

dispose

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

myPopover.dispose()

enable

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

myPopover.enable()

disable

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

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

update

Обновляет позицию всплывающего окна элемента.

myPopover.update()

getInstance

Статический метод, который позволяет Вам получить экземпляр всплывающего окна, связанный с элементом DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Возвращает экземпляр всплывающего окна Bootstrap

getOrCreateInstance

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

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Возвращает экземпляр всплывающего окна Bootstrap

События

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // сделайте что-нибудь...
})