Javascript 为什么按enter键时弹出窗口未关闭

我在使用键盘箭头导航时关闭弹出窗口时遇到问题

如何重新制作：

按行中的向上/向下键，以红色选中该行 按回车键，观察弹出窗口将出现

再次按回车键弹出必须关闭，如何实现

问题：按enter键时弹出窗口没有关闭，我想关闭它

为了更好地查看，我制作了codepen：

函数名为alertmsg{ $.alertable.alertmsg； } $function{ 变量li=$'.rtable tbody tr'； 他当选了； $window.keydown函数{ //按回车键的代码 ife.which==13{ 警告“发生了未知错误”； 返回false； } ife.which==40{ 如果被选中{ liSelected.removeClass'selected'； next=liSelected.next； ifnext.length>0{ liSelected=next.addClass'selected'； }否则{ liSelected=li.eq0.addClass'selected'； } }否则{ liSelected=li.eq0.addClass'selected'； } }else ife.which==38{ 如果被选中{ liSelected.removeClass'selected'； next=liSelected.prev； ifnext.length>0{ liSelected=next.addClass'selected'； }否则{ liSelected=li.last.addClass'selected'； } }否则{ liSelected=li.last.addClass'selected'； } } }; }; //警报插件 // //jquery.alertable.js-最小警报、确认和提示选项。 // //由科里·拉维斯卡为美丽的场地有限责任公司开发 // //根据麻省理工学院许可证获得许可：http://opensource.org/licenses/MIT // ifjQuery函数${ "严格使用",； var模型； var叠加； 按钮； var取消按钮； 活性元素； 函数显示类型、消息、选项{ var defer=$.Deferred； //从背景中移除焦点 activeElement=document.activeElement； activeElement.blur； //删除其他实例 $modal.addoverlay.remove； //合并选项 options=$.extend{}，$.alertable.defaults，options； //创建元素 modal=$options.modal.hide； overlay=$options.overlay.hide； okButton=$options.okButton； cancelButton=$options.cancelButton； //添加消息 ifoptions.html{ modal.find'.alertable message'.htmlmessage； }否则{ modal.find'.alertable message'.textmessage； } //添加提示 iftype==“提示”{ modal.find'.alertable prompt'.htmloptions.prompt； }否则{ modal.find'.alertable prompt'.remove； } //添加按钮 $modal.find'.可报警按钮' .appendtype=='alert'？：取消按钮 .附件按钮； //添加到容器中 $options.container.appendoverlay.appendmodal； //表现出来 options.show.call{ 模态：模态， 覆盖：覆盖 }; //聚焦 iftype==“提示”{ //提示中的第一个输入 $modal.find'。可报警提示：输入：first'。焦点； }否则{ //OK按钮 $modal.find'：输入[type=submit]'。焦点； } //等待提交 $modal.on'submit.alertable'，functionevent{ var i； var格式数据； var值=[]； 违约事件； iftype==“提示”{ formData=$modal.serializeArray； fori=0；i按enter键执行相同的代码块时，需要某种类型的切换变量。我已经修改了你的

基本上可以这样做：

var shown = false;

if(e.which == 13){
   if(!shown){
     showErrorAlert('Some Unknown Error Has Occured.');           
   }else{
     // hide
     $(".alertable, .alertable-overlay").fadeOut(500)
   }
   shown = !shown;
   return false;
}

---

按enter键执行相同的代码块时，需要某种类型的切换变量。我已经修改了你的

基本上可以这样做：

var shown = false;

if(e.which == 13){
   if(!shown){
     showErrorAlert('Some Unknown Error Has Occured.');           
   }else{
     // hide
     $(".alertable, .alertable-overlay").fadeOut(500)
   }
   shown = !shown;
   return false;
}

---

将此添加到“//转义时取消”下

我注意到按escape键已经起作用了

// Cancel on return
$(document).on('keydown.alertable', function(event) {
  if(event.keyCode === 13) {        
    hide(options);
    defer.reject();
    return false;
  }
});

---

将此添加到“//转义时取消”下

我注意到按escape键已经起作用了

// Cancel on return
$(document).on('keydown.alertable', function(event) {
  if(event.keyCode === 13) {        
    hide(options);
    defer.reject();
    return false;
  }
});

---

我认为问题在于您将Enter键的事件侦听器绑定到了窗口。因此，当模态弹出并按enter键时，window元素上的事件侦听器将使模态重新出现

您可以这样做，以查看模态是否可见：

if (e.which == 13 && !$(".alertable").is(":visible")){
   showErrorAlert('Some Unknown Error Has Occured.');
   return false;
}

---

这将仅在当前不可见时显示alertable模式。

我认为问题在于您将Enter键的事件侦听器绑定到了窗口。因此，当模态弹出并按enter键时，window元素上的事件侦听器将使模态重新出现

您可以这样做，以查看模态是否可见：

if (e.which == 13 && !$(".alertable").is(":visible")){
   showErrorAlert('Some Unknown Error Has Occured.');
   return false;
}

这将仅在当前不可见时显示可警报模式