twitter-bootstrap 如何在 Twitter Bootstrap 模式中启用转义键关闭功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12630156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you enable the escape key close functionality in a Twitter Bootstrap modal?
提问by perseverance
I followed the instructions for the Twitter Bootstrap modal on their main documentation page
and used the data-keyboard="true"syntax mentioned but the escape key does not close the modal window.
Is there something else I'm missing?
我按照其主文档页面上的Twitter Bootstrap 模态说明进行操作，
并使用了data-keyboard="true"提到的语法，但转义键不会关闭模态窗口。
还有什么我想念的吗？
Code:
代码：
<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>
回答by Craig MacGregor
It looks like this is an issue with how the keyup event is being bound.
看起来这是如何绑定 keyup 事件的问题。
You can add the tabindexattribute to you modal to get around this issue:
您可以将tabindex属性添加到模态以解决此问题：
tabindex="-1"
So your full code should look like this:
所以你的完整代码应该是这样的：
<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>
For more info you can view the discussion on this issue on github
(Updated link to new TWBS repository)
（更新了指向新 TWBS 存储库的链接）
回答by dennisbot
also if you're invoking via javascript , use this:
此外，如果您通过 javascript 调用，请使用：
$('#myModal').modal({keyboard: true})
回答by Trupti
add tabindex="-1"attribute to modal div
将tabindex="-1"属性添加到模态 div
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
</div>
回答by Ali Adravi
In angular I am using like this:
在角度我是这样使用的：
var modalInstance = $modal.open({
keyboard: false,
backdrop: 'static',
templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
controller: 'currentlyIneligibleCtrl',
resolve: {
data: function () { return param; }
}
});
- backdrop: 'static' => Stop to close on clicking outside
- keyboard: false => Stop to close by using escape buttton
- 背景：'静态' => 在点击外部时停止关闭
- 键盘：false => 停止使用退出按钮关闭
回答by Rashedul Islam Sagor
Bootstrap 3
引导程序 3
In HTML, just set data-backdropto static and data-keyboardto false
在 HTML 中，只需设置data-backdrop为 static 和data-keyboardfalse
Example :
例子 ：
<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>
or
或者
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
Live Test :
现场测试：
https://jsfiddle.net/sztx8qtz/
https://jsfiddle.net/sztx8qtz/
Know More : http://budiirawan.com/prevent-bootstrap-modal-closing/
了解更多：http: //budiirawan.com/prevent-bootstrap-modal-closure/
