2

I found a code online which helps me close pop up dialog using ESC button. The code is as follows:

<script type="text/javascript">
 function ESCclose(evt) {
  if (evt.keyCode == 27) 
   window.close();
 }
</script>

onkeypress

<body onkeypress="ESCclose(event)">

I tried using onkeypress in form tag. Its not working as I am unable to close the dialog using ESC button. Any help?

beginner
  • 303
  • 1
  • 10
  • 31
  • 1
    Possible duplicate of [How to handle ESC keydown on javascript popup window](http://stackoverflow.com/questions/1481626/how-to-handle-esc-keydown-on-javascript-popup-window) – bharat Apr 06 '17 at 08:17

4 Answers4

6

The issue is because the keypress event does not trigger for non-printable characters (eg backspace or escape).

To solve the problem, you could use keydown instead:

function ESCclose(evt) {
  if (evt.keyCode == 27) {
    //window.close();
    console.log('close the window...')
  }
}
<body onkeydown="ESCclose(event)"></body>

As you've tagged the question with jQuery, you could use that to better separate your HTML and JS code:

$(document).on('keydown', function(e) {
  if (e.keyCode == 27)
    window.close();
});

Note that no on* event attribute is required on the body element with the above code.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Thanks a lot for your answer. As I am using bootstrap modal I have placed onkeydown in Div tag. Its stil not working. May I know how to use your jquery code? – beginner Apr 06 '17 at 08:37
  • If you're using a Bootstrap modal then `window.close()` isn't what you need. You need to call `hide` on the modal itself. See the Bootstrap modal docs: http://getbootstrap.com/javascript/#modals-methods – Rory McCrossan Apr 06 '17 at 08:39
  • 1
    Although note if you're using a bootstrap modal then all your code is redundant. You can just set the `keyboard: true` option and the modal will hide when the ESC key is pressed. See the 'Options' section of the link I posted in the previous comment – Rory McCrossan Apr 06 '17 at 08:41
  • Oh Thanks a lot for you help :) In my code data-keyboard was set to false. I made it true and its working. – beginner Apr 06 '17 at 08:50
1

//Use a bootstrap modal which gives you default behavior of closing the modal on escape key or click on outside the modal. OR

Use bootbox which gives a callback on click of yes or no. OR

Use keyup event as shown below to close the modal. Keyup event is triggered after Keydown event, hence it is more appropriate to use keyup event in this scenario.

$(document).on('keyup',function(event) {
   if (event.keyCode == 27) {
        modal.hide();
    }
});

UPDATE: Complete working example html below for bootstrap modal show and hide on ESC keypress. Note: Along with data-keyboard="true", tabindex=-1 attribute is important for the ESC keypress functionality.

<html>
<head>
   <meta charset="utf-8">
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script>
      $(document).ready(function () {         
         $("#hereBtn").click(function (e) {
            $("#alertModal").modal('show');
         });
      });
   </script>
   <title>Bootstrap modal</title>
</head>
<body>
   <div>Click <button id="hereBtn" class="btn btn-success">HERE</button> to open Success modal</div>
   <div id="alertModal" class="modal fade" role="dialog" data-keyboard="true" tabindex="-1">
      <div class="modal-dialog modal-md">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 id="alertHeader"> SUCCESS!!</h4>
            </div>
            <div class="modal-body">
               <div id="alertMessage" class="alert alert-success">Now hit ESC or click outside this modal to close this modal window</div>
            </div>            
         </div>
      </div>
   </div>
</body>
</html>
PrashanthBR
  • 183
  • 7
  • I am using a bootstrap modal. As I am new to jquery. Will you please tell me where should I place the above code? and how it will link to my html code – beginner Apr 06 '17 at 08:36
  • I am using bootstrap modal. It doesn't have a default esc button behavior and its even not closing when I am clicking outside. – beginner Apr 06 '17 at 08:40
  • Good to know you found the solution. However, I have updated my answer with complete example code for someone who needs it in future. – PrashanthBR Apr 06 '17 at 11:22
0
$(document).on('keydown',function(event) {
   if (event.keyCode == 27) {
        window.close(); // Do Something
    }
});
Sanchit Gupta
  • 3,148
  • 2
  • 28
  • 36
0

event.keyCode is deprecated. Use event.code, see API doc

Javascript

function closeOnESC(evt) {
  if (evt.code === 'Escape') {
   // do your stuff
   console.log('close the window...')
  }
}

HTML

<body onkeydown="closeOnEsc(event)"></body>
JozefS
  • 328
  • 2
  • 11