为什么我的模态窗口会自动打开和关闭？答案

【问题标题】：Why does my modal window open and close automatically?为什么我的模态窗口会自动打开和关闭？
【发布时间】：2019-04-30 09:28:09
【问题描述】：

我创建了一个以模态链接打开的搜索块。

我的网站在 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');
  });

您必须单击左上角的菜单和放大镜才能打开带有搜索块的模式窗口。

【问题讨论】：

标签： javascript twitter-bootstrap modal-dialog drupal-8 collapse

【解决方案1】：

你隐藏了这个 div navbar-collapse-first ，它是你打开的模态的父级，所以模态也和它的父级一起隐藏

从 div navbar-collapse-first 中取出 modal 的这部分代码

<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>

【讨论】：