Почему мое модальное окно открывается и закрывается автоматически?

Question

Я создал поисковый блок, который открывается модальной ссылкой.

Мой сайт работает на Drupal 8 и Bootstrap 3.3.7

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

Вот код моего блока:

<div{{ attributes }}>

<div class="modal-search-link">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="modal" data-target="#modal-search">
    <i class="fas fa-search fa-lg"></i>
    <span class="caret"></span>
  </button>
</div>

<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Lancer une recherche</h4>
      </div>
      <div class="modal-body">
        {{ content }}
      </div>
    </div>
  </div>
</div>

</div>

Вот мой код JS, чтобы закрыть меню при открытии модального:

  $('#block-formulaireexposerecherchepage-1').on('click', function () {
       $('#navbar-collapse-first').collapse('hide');
  });

Вы должны нажать на меню в левом верхнем углу и на увеличительное стекло, чтобы открыть модальное окно с блоком поиска.

Answer 1

вы скрываете этот div navbar-collapse-first, который является родителем модала, который вы открываете, поэтому модал скрывается также вместе со своим родителем

, извлекают эту часть кода модала из div navbar-collapse-first

<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Lancer une recherche</h4>
         </div>
       <div class="modal-body">
          {{ content }}
       </div>
    </div>
  </div>