如果单击外部模态，Bootstrap Modal会停止工作下拉

Question

我有一个基于引导程序的站点，其中模式和下拉菜单都使用bootstrap完成：

http://newsite.mckeehomesnc.com/

如果点击“问题？”按钮它会带来一个模态。如果你使用右上角的x关闭模态没有问题。

如果通过单击模态区域外部关闭模态，它将关闭，但随后基础页面上的下拉菜单将不再起作用。

有什么想法吗？我认为这与Bootstrap本身过于广泛的传播停止有关，但不确定。

Answer 1

如果您点击Modal的 off ，一切都会重新开始。但如果你使用按钮它不起作用。当模态打开时，它会向页面添加.modal-backdrop以捕获模态中的点击。

这是关于为何点击不起作用的理论。这是该页面的源代码。

<!-- Modal HTML -->
<div id="contactModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "poupp-contact.php" file -->
        </div>
    </div>
</div> 

由于模态内容是动态加载的，因此引导程序的自动处理程序在页面加载时提供了接线事件，不会捕获事后到达的数据属性。

以下代码应自动关闭模式和所有附加组件：

<button type="button" class="close" data-dismiss="modal">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
</button>

当bootstrap.js加载时，它会查找[data-dismiss=modal]元素并相应地连接侦听器。由于元素在启动时不会存在，我们必须添加一个不会去任何地方的侦听器，然后通过委托找到该元素。

在主体的任何位置收听点击，然后只关心那些具有数据关闭属性的点击。然后找到触发事件的最接近.modal元素的父元素，然后关闭该元素：

$(document).on('click', "[data-dismiss=modal]", function() {
    $(this).closest('.modal').modal('hide')
});

这是一个有效的例子。我已经打破了关闭按钮数据属性，以便测试我们是否可以自己适当地处理它。 Bootstrap不会提取它，但代码会。

$(document).on('click', "[data-dismissTEST=modal]", function() {
    $(this).closest('.modal').modal('hide')
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismissTEST="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>