title: How to Close a Modal / Dialog Box Using the ESC Key?
body: <p>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.</p>
  
  <p>This is the code for the dialog box and the button to open</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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 &amp; event.target == modal1) {
      modal1.style.display = "none";
    }
  })
  
  
  window.keydown = function(event) {
    if (event.which == 27 &amp; event.target == modal1) {
      modal1.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#service1 { display:none }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="button" onclick="document.getElementById('service1').style.display='block'"&gt; Some Text
      &lt;/button&gt;
  
  
  &lt;div id="service1" class="w3-modal w3-margin-top"&gt;
    &lt;div class="w3-modal-content  w3-card-4 w3-animate-top" style=" top:50px; width:61%; height:auto"&gt;
      &lt;header class="w3-container" style="height:auto;
                   background-color:#FE0565 ; color:#fff ;"&gt;
        &lt;span onclick="document.getElementById('service1').style.display='none'"&gt; 
                    &lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;h2 style="text-align: center; font-size:34px; position: 
                    relative;width:54%;margin-left:20%; top:0px; 
                     text-decoration: underline"&gt;&lt;b&gt;Hard Drive&lt;/b&gt;&lt;/h2&gt;
      &lt;/header&gt;
      &lt;div style="height:200px;"&gt;
  
        &lt;p&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;footer class="container" style="background-color:  
                     #FE0565; color:#fff;"&gt;
        &lt;a href="/#"&gt;
          &lt;h3&gt;For More Info Click Here&lt;/h3&gt;
        &lt;/a&gt;
        &lt;span onclick="document.getElementById('service1').style.display='none'"&gt;  
                    &lt;i class="fa fa-close"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>