Bootstrap 5 Модальный через атрибуты данных

Опубликовано: 16 Февраля, 2023

Bootstrap 5 Modal С помощью атрибутов данных можно активировать модальное окно, установив data-bs-toggle="modal" для элемента, например кнопки. Мы также можем переключать определенные модальные окна, используя data-bs-target="#foo" или href="#foo".

Bootstrap 5 Modal Через атрибуты данных:

  • data-bs-toggle="modal": сообщить кнопке, что мы будем переключать модальное окно при нажатии на элемент.
  • data-bs-target="#id": сообщить кнопке, какой идентификатор модального окна нужно переключить.

Синтаксис:

<button type="button" data-bs-toggle="..." 
        data-bs-target="...">
        ...
</button>

Пример 1: В этом примере мы узнаем, как активировать модальное окно с помощью <button>

Выход:

Пример 2. В этом примере мы узнаем, как активировать модальное окно с помощью тега <a> .

Выход:

Ссылки: https://getbootstrap.com/docs/5.0/components/modal/#via-data-attributes