在显示的模态中有一个表格。如果我专注于输入字段（与此相关的任何字段）并按 ESC 键，则该模式将被隐藏。但是，如果我不关注表单字段，则按 ESC 键不会关闭模式。怎么回事？
我想完全禁用模式的 ESC 键功能。我试过这个：
$(document).on('keypress', function(e) {
if(e.keyCode == 27) {
e.preventDefault();
return false;
}
}
但这不会影响任何事情。有没有办法完全禁用模式的 ESC 键？
【问题讨论】：
通过添加data-keyboard="false" 可以解决问题。
类似这样的：<div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
【讨论】：
Twitter 的 Bootstrap modal.js（参见 http://getbootstrap.com/2.3.2/javascript.html#modals）本身具有键盘 true 或 false 布尔值。您可以使用以下脚本避免转义键并在模式外单击：
$(function () {
$('.modal').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
});
工作演示：
$(function () {
$('.modal').modal({
show:true,
keyboard: false,
backdrop: 'static'
});
}); <head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>【讨论】：
data-keyboard="false" 进行了尝试，它正在工作。
keyboard:false 无效。此设置会在模式打开时进行评估。
如果你的模态对话框看起来像这样
<div id="myModal" class="modal hide fade" tabindex="-1" ...>
....
</div>
删除 tabindex="-1" 应该禁用 Escape 键。
【讨论】：
你需要
data-keyboard="false"和data-backdrop="static"
工作演示：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</html>【讨论】：
将键盘值设置为 false！
例子：
<a data-controls-modal="myModal"
data-backdrop="static"
data-keyboard="false"
href="#">
或者如果您使用的是 JavaScript：
$(function () {
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
}
【讨论】：
演示 JQuery 代码
$('#myModal').modal({show: true, keyboard: false});
【讨论】：
您可以通过向其添加 ID 并简单地删除 keydown 事件来定位特定输入，如下所示：
JS
$(document).ready(function() {
$('form input').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
此示例使用 Enter 键。
【讨论】：