use*_*635 41 twitter-bootstrap
在所示的模态中有一个表格.如果我专注于输入字段(任何字段)并按ESC键,则隐藏该模态.但是,如果我不关注表单字段,则按ESC键不会关闭模式.这是怎么回事？
我想完全禁用模态的ESC键功能.我试过这个:
$(document).on('keypress', function(e) {
if(e.keyCode == 27) {
e.preventDefault();
return false;
}
}
但这不会影响任何事情.有没有办法完全禁用模态的ESC键？
ptC*_*der 52
通过添加data-keyboard="false"修复问题.
像这样的东西: <div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Rav*_*lya 46
Twitter的Bootstrap modal.js(参见http://getbootstrap.com/2.3.2/javascript.html#modals)本身有键盘true或false布尔值.您可以使用以下脚本避免转义按键并在模态外单击:
$(function () {
$('.modal').modal({
show: true,
keyboard: false,
backdrop: 'static'
});
});
det*_*ale 38
如果你的模态对话框看起来像这样
<div id="myModal" class="modal hide fade" tabindex="-1" ...>
....
</div>
删除tabindex =" - 1"应禁用Escape键.
小智 8
你需要data-keyboard ="false"allong with tabindex =" - 1"和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>小智 8
将键盘值设置为false!
例:
<a data-controls-modal="myModal"
data-backdrop="static"
data-keyboard="false"
href="#">
或者如果您使用的是JavaScript:
$(function () {
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
}
Hid*_*den -5
您可以通过向特定输入添加 ID 并简单地删除 Enter 的 keydown 事件来定位该特定输入，如下所示：
JS
$(document).ready(function() {
$('form input').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
此示例使用 Enter 键。
| 归档时间： |
|
| 查看次数： |
54191 次 |
| 最近记录： |