Bootstrap 4 – это популярная интерфейсная платформа, предлагающая ряд мощных функций, включая модальные окна для отображения контента в модальном диалоговом окне. Хотя использование модальных окон довольно просто, запуск модальных окон внутри модальных окон может оказаться немного сложнее. В этой статье мы рассмотрим различные методы достижения этой функциональности и приведем примеры кода.

Метод 1: использование JavaScript/jQuery.
Один из способов отображения модального окна внутри другого модального окна — использование JavaScript или jQuery. Нацеливаясь на события родительского модального окна, мы можем вызвать открытие дочернего модального окна. Вот пример:

<!-- Parent Modal -->
<div class="modal" id="parentModal">
  <div class="modal-content">
    <h4>Parent Modal</h4>
    <button class="btn btn-primary" id="openChildModal">Open Child Modal</button>
  </div>
</div>
<!-- Child Modal -->
<div class="modal" id="childModal">
  <div class="modal-content">
    <h4>Child Modal</h4>
  </div>
</div>
<script>
  $(document).ready(function() {
    $('#openChildModal').click(function() {
      $('#childModal').modal('show');
    });
  });
</script>

Метод 2: использование модальных событий Bootstrap.
Другой подход — использовать модальные события Bootstrap, такие как show.bs.modalи hidden.bs.modal. Прикрепив к этим событиям прослушиватели событий, мы можем контролировать открытие и закрытие модальных окон внутри модальных окон. Вот пример:

<!-- Parent Modal -->
<div class="modal" id="parentModal">
  <div class="modal-content">
    <h4>Parent Modal</h4>
  </div>
</div>
<!-- Child Modal -->
<div class="modal" id="childModal">
  <div class="modal-content">
    <h4>Child Modal</h4>
  </div>
</div>
<script>
  $(document).ready(function() {
    $('#parentModal').on('shown.bs.modal', function() {
      $('#childModal').modal('show');
    });
    $('#parentModal').on('hidden.bs.modal', function() {
      $('#childModal').modal('hide');
    });
  });
</script>

Метод 3. Использование модальных параметров Bootstrap.
Модальные параметры Bootstrap позволяют контролировать поведение модальных окон. Установив для параметров backdropи keyboardзначение false, мы можем предотвратить закрытие родительского модального окна при открытии дочернего модального окна. Вот пример:

<!-- Parent Modal -->
<div class="modal" id="parentModal" data-backdrop="static" data-keyboard="false">
  <div class="modal-content">
    <h4>Parent Modal</h4>
    <button class="btn btn-primary" data-toggle="modal" data-target="#childModal">Open Child Modal</button>
  </div>
</div>
<!-- Child Modal -->
<div class="modal" id="childModal">
  <div class="modal-content">
    <h4>Child Modal</h4>
  </div>
</div>

В этой статье мы рассмотрели несколько методов запуска модальных окон Bootstrap 4 внутри модальных окон. Мы рассмотрели использование JavaScript/jQuery, использование модальных событий Bootstrap и модальных параметров Bootstrap. Используя эти методы, вы можете создавать динамические и интерактивные модальные возможности для своих пользователей.