【问题标题】：How do you enable the escape key close functionality in a Twitter Bootstrap modal?如何在 Twitter Bootstrap 模式中启用转义键关闭功能？
【发布时间】：2012-09-19 18:10:03
【问题描述】：

我按照Twitter Bootstrap modal on their main documentation page
的说明操作并使用了提到的data-keyboard="true" 语法，但转义键没有关闭模式窗口。
还有什么我遗漏的吗？

代码：

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

【问题讨论】：

默认开启

标签： twitter-bootstrap

【解决方案1】：

让模态= []

        $(document).keyup(function(e) {
            if((e.key=='Escape' || e.key=='Esc' || e.keyCode==27) && modals.length) {
                $(".modal[modal='" + modals.pop() + "']").modal('hide')
            }
        })
        
        $(".modal").on("shown.bs.modal", e => {
            const id = modals.length
            modals.push(id)
            $(e.target).attr("modal", id)
        })

【讨论】：

【解决方案2】：

引导程序 3

在 HTML 中，只需将 data-backdrop 设置为静态，data-keyboard 设置为 false

示例：

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

或

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

现场测试：

https://jsfiddle.net/sztx8qtz/

【讨论】：

您的示例没有启用转义键

【解决方案3】：

看起来这是 keyup 事件绑定方式的问题。

您可以将tabindex 属性添加到您的模态以解决此问题：

tabindex="-1"

所以你的完整代码应该是这样的：

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

有关更多信息，您可以查看this issue on github上的讨论

（更新到新 TWBS 存储库的链接）

【讨论】：

这会阻止输入字段的自动对焦。
如果您从多个位置调用对话框，您还可以将 data-keyboard 属性附加到您的 div.modal（并在调用者中省略它）。
正如@nrek 在下面指出的那样 - 默认情况下关闭转义是真的，所以你并不严格需要 data-keyboard="true" - 它是 tabindex="-1" 启用行为
我可以确认这个解决方案在 Bootstrap 4 中有效。我不知道为什么它在默认情况下不能像文档所说的那样工作。
此外，data-keyboard 属于模态元素，而不是控制器。这可以通过将其设置为false来测试。

【解决方案4】：

将tabindex="-1" 属性添加到模态div

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

【讨论】：

【解决方案5】：

在角度我是这样使用的：

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

背景：'static' => 点击外部时停止关闭
keyboard: false => 使用退出按钮停止关闭

【讨论】：

【解决方案6】：

如果您通过 javascript 调用，也可以使用：

$('#myModal').modal({keyboard: true})

【讨论】：

这曾经是您唯一需要做的事情，但现在您还需要确保您的 div 具有 'tabindex="-1"' 属性。
我只需要设置标签索引。
@dhacke 那是因为键盘属性默认为真！所以只需设置 tabindex='-1'