19

我已经制作了一个模态框弹出功能，并且我想在所有浏览器中当有人按下转义键时关闭这个模态弹出框。我已将文件modal-window.min.js用于这些弹出窗口。

我如何关闭这些以响应此键？

4

7 回答 7

32

具有以下keydown功能：

$(document).keydown(function(event) { 
  if (event.keyCode == 27) { 
    $('#modal_id').hide();
  }
});

注意：最好使用keydownEscape 键，因为在某些浏览器中，keypress仅当键输出字符时才会触发事件

于 2017-07-04T13:37:16.233 回答
19 
$(document).keypress(function(e) { 
    if (e.keyCode === 27) { 
        $("#popdiv").fadeOut(500);
        //or
        window.close();
    } 
});
于 2012-10-10T09:53:25.730 回答
9

对于登陆这个寻找非jQuery解决方案的人来说，这里是：

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    // close modal here
  }
})
于 2020-06-16T13:15:53.157 回答
2 
<script type="text/javascript">
 jQuery(document).keypress(function(e) {
  if (e.keyCode === 27) {
   jQuery("#myModal").modal('toggle');
                 OR
   jQuery("#myModal").modal('hide');
  }
 });
</script>

取自：http ://chandreshrana.blogspot.in/2016/05/how-to-close-model-popup-on-escape-key.html

于 2016-05-26T05:20:06.143 回答
2

如果您有多个模式，您可以使用下面的脚本。我不得不在一页中打开这么多模式，这就是我写这个脚本的原因。该脚本使用转义键根据打开顺序一一关闭模态框。而且您不需要在脚本中定义任何模式名称，因此在任何地方添加一次使用。

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!");
        }
    }
};

});
于 2019-05-08T10:00:46.693 回答
0

试试这个代码：

<script type="text/javascript">
   $(document).keyup(function(event){
      if(event.which=='27'){
          $('.cd-popup').removeClass('is-visible');
      }
   });
</script>
于 2019-01-02T05:40:38.737 回答
-1

使用 AngularJs：如果你有多个模式，

为每个模态分配一个值，当您打开模态时将其设置为 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();
    }

使用 Angular，event.target属性指示您设置 ng-controller 的位置，并且event.currentTarget是#document.

于 2017-03-28T10:01:52.910 回答