jQuery 如何在点击转义时关闭模态弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12816497/
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 can I close a modal popup on hitting escape?
提问by user1503100
I have made a modal box popup functionality and I want to close this modal popup up box when someone hits the escape key, in all browsers. I have used the file modal-window.min.jsfor these popups.
我制作了一个模态框弹出功能，当有人在所有浏览器中按下转义键时，我想关闭这个模态弹出框。我已将文件modal-window.min.js用于这些弹出窗口。
How can I close these in response to this key?
我该如何关闭这些以响应此键？
回答by Ramon Balthazar
With the keydownfunction:
具有以下keydown功能：
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#modal_id').hide();
}
});
Note:Prefer using
keydownfor the Escape key as in some browsers thekeypressevent is only fired if the key outputs a character
注意：最好使用
keydownEscape 键，因为在某些浏览器中，keypress只有当键输出字符时才会触发事件
回答by StaticVariable
$(document).keypress(function(e) {
if (e.keyCode === 27) {
$("#popdiv").fadeOut(500);
//or
window.close();
}
});
回答by Chandresh
<script type="text/javascript">
jQuery(document).keypress(function(e) {
if (e.keyCode === 27) {
jQuery("#myModal").modal('toggle');
OR
jQuery("#myModal").modal('hide');
}
});
</script>
Taken from: http://chandreshrana.blogspot.in/2016/05/how-to-close-model-popup-on-escape-key.html
取自：http: //chandreshrana.blogspot.in/2016/05/how-to-close-model-popup-on-escape-key.html
回答by Fatih
If you have more than one modal, you can use script below. I had to open so many modal in one page, thats why i wrote this script. This script closes modals one by one according to opening order with escape key. And also you don't need to define any modal name in script hence add once use everywhere.
如果您有多个模态，则可以使用下面的脚本。我不得不在一页中打开这么多模态，这就是我写这个脚本的原因。该脚本根据打开顺序使用转义键一一关闭模态。而且您不需要在脚本中定义任何模式名称，因此在任何地方添加一次使用。
var modals=[]; // array to store modal id
$(document).ready(function(){
$('.modal').modal({show: false, keyboard: false}); // disable keyboard because it conflicts below
$('.modal').on('show.bs.modal', function (event) {
//add modal id to array
modals.push(event.target.id);
});
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
if(modals.length>0){
//get last modal id by using pop().
//This function also removes last item in array.
var id = modals.pop();
if($('#'+id).is(':visible')){ // if modal is not closed by click or close button
$('#'+id).modal('toggle');
}
}else{
alert("Could not find any modals!");
}
}
};
});
回答by mehul
try this code :
试试这个代码：
<script type="text/javascript">
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
</script>
回答by Amir Hossein
Using AngularJs: In case you have multiple modals,
使用 AngularJs：如果你有多个模态，
assign a value to each modal, when you open the modal set it to true when you close it set it to false.
为每个模态分配一个值，打开模态时将其设置为true，关闭时将其设置为false。
//in your .js script
document.onkeydown = function (event) {
event = event || window.event;
if (event.keyCode === 27) {
if (usersModal)
$scope.hideUsersModal();
else if (groupsModal)
$scope.hideGroupsModal();
}
Using Angular, event.targetproperty indicates where you've set the ng-controller and event.currentTargetis the #document.
使用 Angular，event.target属性指示您设置 ng-controller 的位置，并且event.currentTarget是#document.
