Как создавать всплывающие окна в Bootstrap 5?

Popover — это не что иное, как большая всплывающая подсказка, показанная во всплывающем окне и указывающая на активированный элемент. Подобно компоненту всплывающей подсказки Bootstrap, компоненту popover также требуется сторонняя библиотека JavaScript popper.min.js для позиционирования. Вы можете сослаться на полный начальный шаблон Bootstrap для использования необходимых файлов CSS и скриптов.

Учебное пособие по Bootstrap 5 Popovers

  1. Начало работы с всплывающим окном Bootstrap
  2. Инициализация компонента Bootstrap
  3. Поповер на кнопках
  4. Расположение всплывающего окна
  5. Раскрывающееся всплывающее окно
  6. Настройка всплывающего окна

1. Начало работы с Popover

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

  • Popover нужен плагин всплывающей подсказки, что означает, что вы должны включить файл «bootstrap.min.js» в свой HTML-шаблон.
  • Ему также нужна сторонняя библиотека JavaScript «popper.min.js» для правильного позиционирования.
  • В Bootstrap 4 вы можете использовать предварительно скомпилированный файл «bootstrap.bundle.min.js», содержащий «bootstrap.min.js» и «popper.min.js».
  • Чтобы повысить производительность загрузки страницы, по умолчанию всплывающее окно не загружается на странице. Вы должны явно инициализировать родительский элемент, чтобы загрузить всплывающее окно.
  • Всплывающее окно не будет отображаться, если внутри всплывающего окна нет заголовка или содержимого.
  • Всплывающее окно по умолчанию скроется, только если вы снова нажмете на активированный элемент. В противном случае он будет отображаться даже при прокрутке содержимого на странице.
  • Отключаемое всплывающее окно будет скрыто при нажатии в любом месте.

2. Инициализация Popover

Как и всплывающие подсказки, всплывающие окна также необходимо инициализировать перед использованием. Самый общий способ — инициализировать глобально, как показано ниже:

<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>

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

<script>
$(function () {
$('.example-popover').popover({
container: 'body'
})
})
</script>

Не забудьте включить сценарий инициализации сразу после сценариев «popper.min.js» и «bootstrap.min.js».

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

Давайте начнем добавлять всплывающее окно для элемента кнопки:

<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Large Button Element
</button>

В случае, если вы инициализировали тело, вам следует добавить data-container = «тело» атрибут кнопки.

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

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

4. Расположение всплывающих окон

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

<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="left" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Left
</button>
<button type="button" class="btn btn-danger" data-toggle="popover" data-placement="right" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Right
</button>
<button type="button" class="btn btn-info" data-toggle="popover" data-placement="top" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Top
</button>
<button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Popover on Bottom
</button>

Ниже показано разное расположение всплывающих окон:

Поповер Позиционирование

5. Раскрывающееся меню

По умолчанию всплывающее окно появляется при нажатии на элемент и исчезает при повторном щелчке по элементу. Он не исчезнет, ​​если вы случайно нажмете на страницу за пределами элемента. Вы можете создать запрещенное всплывающее окно, используя следующий код:

<a tabindex="0" class="btn btn-lg btn-warning" role="button" data-toggle="popover" data-trigger="focus" title="Here is Content Heading" data-content="Here is the actual content inside the popover box and below the heading.">
Dismissble Popover on A Tag
</a>

В data-trigger = «фокус» атрибут используется для того, чтобы всплывающее окно появлялось / исчезало при выделении клавишей табуляции на клавиатуре.

Разъяренное поповер

Обратите внимание, что тег используется вместо

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.