如何在 Bootstrap 模式下启用 escape 键 close 功能？

我按照 Bootstrap 模式在他们的主要文档页面 < br/> 的说明使用了上面提到的 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>
86483 次浏览
小开
最佳答案

看起来这是一个如何绑定 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})
小开

在角度方面，我是这样使用的:

var modalInstance = $modal.open({
keyboard: false,
backdrop: 'static',
templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
controller: 'currentlyIneligibleCtrl',
resolve: {
data: function () { return param; }
}
});
  • 背景: ‘ static’= > 停止关闭外部点击
  • 键盘: false = > 使用转义按钮停止关闭
小开

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

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


</div>
小开

鞋带3

在 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-closing/

小开

Let modals = []

        $(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)
})

提交答案