Как открыть несколько модальных окон в bootstrap 5?

Для открытия нескольких модальных окон одновременно в Bootstrap 5 вам потребуется немного настроить их JavaScript часть. Bootstrap по умолчанию не поддерживает открытие нескольких модальных окон одновременно из коробки, поэтому необходимо немного модифицировать код.

1. Прежде всего, убедитесь, что у ваших модальных окон есть уникальные идентификаторы, которые будут использоваться для управления ими.

2. Вам нужно будет использовать JavaScript для управления каждым модальным окном отдельно. Например, можно использовать jQuery для этой цели.

Пример кода:

HTML:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal1">Открыть Модальное Окно 1</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal2">Открыть Модальное Окно 2</button>

<div class="modal" id="modal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Модальное Окно 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Содержимое модального окна 1
      </div>
    </div>
  </div>
</div>

<div class="modal" id="modal2">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Модальное Окно 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Содержимое модального окна 2
      </div>
    </div>
  </div>
</div>

JavaScript (jQuery):

$(document).ready(function() {
  $('#modal1').on('show.bs.modal', function () {
    $('#modal2').modal('hide'); // При открытии первого модального окна закрываем второе
  });
  
  $('#modal2').on('show.bs.modal', function () {
    $('#modal1').modal('hide'); // При открытии второго модального окна закрываем первое
  });
});

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

Надеюсь, данная информация была полезной для вас. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.