我按照其主文档页面上的 Twitter Bootstrap 模式说明进行操作
,并使用了提到的
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>
看起来这是如何绑定 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>
欲了解更多信息,您可以查看 github 上此问题的讨论
(更新了新 TWBS 存储库的链接)
如果您通过 javascript 调用,请使用此:
$('#myModal').modal({keyboard: true})
向模态 div 添加
tabindex="-1"
属性
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
</div>
在 Angular 中我这样做:
var modalInstance = $modal.open({
keyboard: false,
backdrop: 'static',
templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
controller: 'currentlyIneligibleCtrl',
resolve: {
data: function () { return param; }
}
});
backdrop: 'static'
=> 点击外部停止关闭keyboard: false
=> 使用退出按钮停止关闭让情态动词 = []
$(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)
})
在 HTML 中,只需将
data-backdrop
设置为 static,并将 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/
了解更多:http://budiirawan.com/prevent-bootstrap-modal- opening/