Bootstrap 3.0 Modal - 如何使用 ESC 关闭或单击模态外部？答案

【问题标题】：Bootstrap 3.0 Modal - How to dismiss with ESC or click outside modal?Bootstrap 3.0 Modal - 如何使用 ESC 关闭或单击模态外部？
【发布时间】：2014-10-25 10:07:17
【问题描述】：

我在这里有一个 Bootply 测试设置：http://bootply.com/67311

当我单击“X”或“关闭”按钮时，它按预期工作。但是，我希望它在用户点击转义键或在模式对话框外单击时关闭/关闭。

我该怎么做？

【问题讨论】：

标签： twitter-bootstrap modal-dialog

【解决方案1】：

非常感谢“tabindex="-1"

有同样的问题。我检查了 bootstrap.js（模态部分）中的代码 - 看起来某些事件（使用了转义功能）没有触发。我希望尽快修复它。

我得到了 BS3 RC2，鼠标点击在那里完美工作

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

【讨论】：

谢谢，我自己并没有意识到 tabindex，这让我大吃一惊。

【解决方案2】：

所以我使用了这段代码，它可以工作：

  <div class="modal hide fade" id="modalCreate">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h3>Create a new App</h3>
    </div>
    <div class="modal-body">
      Body stuff here

    <div class="modal-footer">
      <button type="submit" class="btn btn-primary">Save</button>
      <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button>
    </div> 
  </div>

还要确保在文件中包含 bootstrap.js

【讨论】：

谢谢 - 但这给了我奇怪的结果。我怀疑这在 Bootstrap 3.0 中有所不同，因为我在 Bootstrap 2.x 的许多示例中看到了这一点，并且它在那里工作。将它添加到 Bootply 中，看看我的意思。
我添加了 tabindex="-1" 来获得：
并且在没有键盘的情况下有效：true，启用转义键。但是在模态框外单击鼠标仍然没有任何作用。
@Eric 我也有同样的问题，检查你的bootstrap js 版本，从3.0.0 切换到2.3.2 后，它又可以工作了。