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

柔光的暖阳◎ 2022-01-29 10:04 463阅读 0赞

# Bootstrap modal插件 按ESC键关闭模态框无效(必须添加属性tabindex方可) #

## Intro ##

Bootstrap框架 Modal插件 data-keyboard属性：  
![在这里插入图片描述][20190521180600762.png]  
也就是说，模态框默认是可以按下`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会关闭模态框`这个功能。

## Links ##

*  [bootstrap中为什么要给modal添加tabindex=-1才能通过tab键在modal中切换焦点][bootstrap_modal_tabindex_-1_tab_modal]
 *  [`tabindex`属性规定元素的tab键控制次序(当tab键用于导航时)][tabindex_tab_tab]

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

[20190521180600762.png]: /images/20220129/529dcbbd2a3e4beb8ad64babd49a639c.png
[bootstrap_modal_tabindex_-1_tab_modal]: https://segmentfault.com/q/1010000004954562
[tabindex_tab_tab]: http://www.w3school.com.cn/tags/att_standard_tabindex.asp