Bootstrap 按ESC键无法关闭模态框modal-蒲公英云

Bootstrap 按ESC键无法关闭模态框modal

Intro

Bootstrap框架 Modal插件 data-keyboard属性：
在这里插入图片描述
也就是说，模态框默认是可以按下ESC键来关闭的。

Code

使用Emmet语法创建模态框的基本结构：
div.modal.fade#modalTest>div.modal-dialog>div.modal-content>(div.modal-header+div.modal-body+div.modal-footer)
生成代码如下：

修改模态框的代码：向div.modal元素添加data-keyboard属性。

<button class="btn btn-primary" data-toggle="modal" data-target="#modalTest">模态框测试</button>
<div class="modal fade" id="modalTest" data-keyboard="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">header</div>
            <div class="modal-body">body</div>
            <div class="modal-footer">footer</div>
        </div>
    </div>
</div>

触发该模态框的按钮
<button class="btn btn-primary" data-toggle="modal" data-target="#modalTest">模态框测试</button>
测试
点击按钮，会弹出模态框。
但，按ESC键并不会关闭模态框。
解决：
向对应的div.modal元素添加tableindex属性后(值为多少都可以)，发现，data-keyboard属性才生效。
修改data-keyboard属性的值为true或false，可以控制按下ESC会关闭模态框这个功能。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Bootstrap-test</title>
</head>
<body>
    <button class="btn btn-primary" data-toggle="modal" data-target="#modalTest">模态框测试</button>
    <div class="modal fade" id="modalTest" data-keyboard="true" tabindex="0">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">header</div>
                <div class="modal-body">body</div>
                <div class="modal-footer">footer</div>
            </div>
        </div>
    </div>
</body>
</html>