Модальное окно

Сначала надо создать дизайн модального окна.

<div class="modal fade" id="modalName" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header">
        <p class="modal-title">Заголовок</p>
        <button type="button" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        Контент модального окна
      </div>

      <div class="modal-footer">
        <button type="button" data-bs-dismiss="modal">Закрыть</button>
        <button type="button">Сохранить</button>
      </div>

    </div>
  </div>
</div>

Стоит обратить внимание на атрибут id="modalName". В данном атрибуте задаётся имя модального окна, по которому она будет открываться.

За закрытие модального окна отвечает атрибут data-bs-dismiss="modal".

Открыть модальное окно можно через атрибуты data-bs-toggle="modal" и data-bs-target (в данном параметр указывается ид модального окна, которое надо показать).

<button type="button" data-bs-toggle="modal" data-bs-target="#modalName">Открыть модальное окно</button>

Результат: