How to Close a Modal / Dialog Box Using the ESC Key?

Question

Hi so I am using these Modal / dialog boxes on my site. I am using code from W3-Schools which is jQuery if I'm not mistaken. They work fine and I was able to get them to close by clicking outside the box, but I am having trouble with having them close bu using the ESC key. The page that I have them on has 6 of them as an added element of difficulty. Any help would be greatly appreciated.

This is the code for the dialog box and the button to open

// Get the modal
var modal1 = document.getElementById('service1');
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}

// These are the new code for using the ESC key (keycode = 27), but I have  not had any luck

$("window").keydown(function(event) {
  if (event.which == 27 & event.target == modal1) {
    modal1.style.display = "none";
  }
})


window.keydown = function(event) {
  if (event.which == 27 & event.target == modal1) {
    modal1.style.display = "none";
  }
}

#service1 { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" onclick="document.getElementById('service1').style.display='block'"> Some Text
    </button>


<div id="service1" class="w3-modal w3-margin-top">
  <div class="w3-modal-content  w3-card-4 w3-animate-top" style=" top:50px; width:61%; height:auto">
    <header class="w3-container" style="height:auto;
                 background-color:#FE0565 ; color:#fff ;">
      <span onclick="document.getElementById('service1').style.display='none'"> 
                  <i class="fa fa-close"></i></span>
      <h2 style="text-align: center; font-size:34px; position: 
                  relative;width:54%;margin-left:20%; top:0px; 
                   text-decoration: underline"><b>Hard Drive</b></h2>
    </header>
    <div style="height:200px;">

      <p></p>
    </div>
    <footer class="container" style="background-color:  
                   #FE0565; color:#fff;">
      <a href="/#">
        <h3>For More Info Click Here</h3>
      </a>
      <span onclick="document.getElementById('service1').style.display='none'">  
                  <i class="fa fa-close"></i></span>
    </footer>
  </div>
</div>

`& event.target == modal1` is never the case. – mplungjan Sep 06 '18 at 14:47 — mplungjan, Sep 06 '18 at 14:47
@mplungjan I appreciate the help with the snippet for real. – Sam Max Sep 06 '18 at 22:20 — Sam Max, Sep 06 '18 at 22:20

mplungjan · Accepted Answer · 2018-09-06T15:00:32.293

Try this:

$(document).on("click", ".w3-modal",function(event) {
  $(this).hide(); // hide when clicked
});

// if you want to hide when clicked outside try something like this
/*
$(document).on("click",function(event) {
  var $tgt = $(event.target);
  if (!$tgt.is(".w3-modal") && !$tgt.is(".modalbut")) $(".w3-modal").hide(); // hide when clicked outside
});

*/
// These are the new code for using the ESC key (keycode = 27), but I have  not had any luck

$(document).keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == 27) $(".w3-modal").hide();
});

#service1 {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="modalbut button" onclick="document.getElementById('service1').style.display='block'"> Some Text
    </button>


<div id="service1" class="w3-modal w3-margin-top">
  <div class="w3-modal-content  w3-card-4 w3-animate-top" style=" top:50px; width:61%; height:auto">
    <header class="w3-container" style="height:auto;
                 background-color:#FE0565 ; color:#fff ;">
      <span onclick="document.getElementById('service1').style.display='none'"> 
                  <i class="fa fa-close"></i></span>
      <h2 style="text-align: center; font-size:34px; position: 
                  relative;width:54%;margin-left:20%; top:0px; 
                   text-decoration: underline"><b>Hard Drive</b></h2>
    </header>
    <div style="height:200px;">

      <p></p>
    </div>
    <footer class="container" style="background-color:  
                   #FE0565; color:#fff;">
      <a href="/#">
        <h3>For More Info Click Here</h3>
      </a>
      <span onclick="document.getElementById('service1').style.display='none'">  
                  <i class="fa fa-close"></i></span>
    </footer>
  </div>
</div>

Dude you rock! I cant thank you enough, works perfect. – Sam Max Sep 06 '18 at 22:30 — Sam Max, Sep 06 '18 at 22:30

score 0 · Answer 2 · answered May 08 '19 at 09:55

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

});

How to Close a Modal / Dialog Box Using the ESC Key?

2 Answers2