Всплывающее окно Bootstrap 4
Всплывающее окно Bootstrap 4
Компонент Popover похож на всплывающие подсказки; это всплывающее окно, которое появляется, когда пользователь щелкает элемент. Разница в том, что всплывающее окно может содержать гораздо больше контента.
Переключить всплывающее окноКак создать всплывающее окно
Чтобы создать всплывающее окно, добавьте data-toggle="popover"
атрибут к элементу.
Используйте titleатрибут, чтобы указать текст заголовка всплывающего окна, и используйте data-contentатрибут, чтобы указать текст, который должен отображаться внутри тела всплывающего окна:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Примечание. Всплывающие окна должны быть инициализированы с помощью jQuery: выберите указанный элемент и вызовите popover()метод.
Следующий код активирует все всплывающие окна в документе:
Пример
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Позиционирование всплывающих окон
По умолчанию всплывающее окно будет отображаться справа от элемента.
Используйте data-placementатрибут, чтобы установить положение всплывающего окна сверху, снизу, слева или справа от элемента:
Пример
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Примечание. Атрибуты размещения не работают должным образом, если для них недостаточно места. Например: если вы используете верхнее размещение в верхней части страницы (где для него нет места), вместо этого всплывающее окно будет отображаться под элементом или справа (где для него есть место).
Закрытие всплывающих окон
По умолчанию всплывающее окно закрывается при повторном нажатии на элемент. Однако вы можете использовать data-trigger="focus"атрибут, который закроет всплывающее окно при нажатии вне элемента:
Пример
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Совет: Если вы хотите, чтобы всплывающее окно отображалось при наведении указателя мыши на элемент, используйте data-triggerатрибут со значением «hover»:
Пример
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Полный справочник по всплывающим окнам Bootstrap
Чтобы получить полную справку обо всех параметрах, методах и событиях всплывающих окон, перейдите в наш справочник по всплывающим окнам Bootstrap JS .