How can I close a modal popup on hitting escape?

Question

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.js for these popups.

How can I close these in response to this key?

refer to http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery in addition i guest to use tinybox which doesn't have to do anything with jquery — MySqlError, Oct 10 '12 at 09:54

Ramon Balthazar · Answer 1 · 2019-12-10T15:50:06.650

36

With the keydown function:

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

Note: Prefer using keydown for the Escape key as in some browsers the keypress event is only fired if the key outputs a character

edited Dec 10 '19 at 15:50

answered Jul 04 '17 at 13:37

Ramon Balthazar

3,907
3
25
34

score 19 · Answer 2 · edited May 07 '19 at 20:13

19

$(document).keypress(function(e) { 
    if (e.keyCode === 27) { 
        $("#popdiv").fadeOut(500);
        //or
        window.close();
    } 
});

edited May 07 '19 at 20:13

Jamie Counsell

7,730
6
46
81

answered Oct 10 '12 at 09:53

StaticVariable

5,253
4
23
45

1

`$("#popdiv").fadeOut(500);` <- This line just fades the modal out, but the fade stays. This keeps the entire background page faded and unclickable. – But I'm Not A Wrapper Class Apr 10 '15 at 21:15
1

@CyberneticTwerkGuruOrc fade the proper div – StaticVariable Apr 27 '15 at 11:58
1

it's keypress or keydown for escape key catch event ? – Nolwennig Aug 17 '16 at 15:10
1

This doesn't currently work in Chrome, however the keydown suggestion below does. – Nathan Sep 10 '18 at 23:17
agreed with @StaticVariable, but the sometimes keypress event only executes when it gives some output. – Vidit Varshney Feb 09 '20 at 17:43

Alec Rust · Answer 3 · 2020-08-17T10:32:51.113

16

For the people landing on this looking for a non-jQuery solution, here it is:

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    // close modal here
  }
})

edited Aug 17 '20 at 10:32

answered Jun 16 '20 at 13:15

Alec Rust

10,532
12
48
63

score 2 · Answer 4 · edited May 07 '19 at 20:13

2

<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

edited May 07 '19 at 20:13

Jamie Counsell

7,730
6
46
81

answered May 26 '16 at 05:20

Chandresh

361
2
7

score 2 · Answer 5 · answered May 08 '19 at 10:00

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

});

score 0 · Answer 6 · answered Jan 02 '19 at 05:40

0

try this code :

<script type="text/javascript">
   $(document).keyup(function(event){
      if(event.which=='27'){
          $('.cd-popup').removeClass('is-visible');
      }
   });
</script>

answered Jan 02 '19 at 05:40

Mehul Velani

691
9
13

score -1 · Answer 7 · edited May 07 '19 at 20:13

Using AngularJs: In case you have multiple modals,

assign a value to each modal, when you open the modal set it to true when you close it set it to 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.target property indicates where you've set the ng-controller and event.currentTarget is the #document.

How can I close a modal popup on hitting escape?

7 Answers7