Close Modal by the Escape key

[Tetrikus]

I'd love to be able to close the modals with the ESC key. I believe, this would be an intuitive behaviour for the user.

[nickfmc]

Props to @onetrev for this code

// close modal menu if esc key is used

  jQuery(document).keyup(function(ev){
    if(ev.keyCode == 27) {
      modal_menu.close();
    }
  });

[richardwiggins]

This doesn't work for me. Should I need to be adding anything else?

[nickfmc]

you need to make sure your var matches. here this should help.

 // modal menu init
  var modal_menu = jQuery("#ModalMenuButton").animatedModal({
    modalTarget: 'ModalNav',
    animatedIn: 'slideInDown',
    animatedOut: 'slideOutUp',
    animationDuration: '0.50s',
    color: '#008f8f'
  });
  // close modal menu if esc key is used
  jQuery(document).keyup(function(ev){
    if(ev.keyCode == 27) {
      modal_menu.close();
    }
  });

[rezaaria]

you need to make sure your var matches. here this should help.

 // modal menu init
  var modal_menu = jQuery("#ModalMenuButton").animatedModal({
    modalTarget: 'ModalNav',
    animatedIn: 'slideInDown',
    animatedOut: 'slideOutUp',
    animationDuration: '0.50s',
    color: '#008f8f'
  });
  // close modal menu if esc key is used
  jQuery(document).keyup(function(ev){
    if(ev.keyCode == 27) {
      modal_menu.close();
    }
  });

I use this code but its not working ? any solution ?

var modal_menu = jQuery("#xang-modal-search").animatedModal({
    modalTarget: 'xang-modal-searchid',
    animatedIn: 'slideInDown',
    animatedOut: 'slideOutUp',
    animationDuration: '0.50s',
    color: '#008f8f'
});
jQuery(document).keyup(function(ev){
    if(ev.keyCode == 27) {
    modal_menu.close();
    }
});

[nickfmc]

if your modal is working other than the esc close? then check the key you are pressing is in fact registering as keycode 27 https://keycode.info/

[rezaaria]

Yes modal work well but close by esc doesn't work.I checked keycode and its 27 but it doesn't work.

Is there any other solution ?

[rezaaria]

Anyone have solution to fix close by esc ?

[bjornweb]

animatedModal does not have a close function (for now ;-) ). But why not simply trigger a click on the modal close button when the escape key is pressed?

// Close (every) modal if Escape key is pressed.
jQuery(document).keyup(function(ev){ 
   if(ev.keyCode == 27) {
     jQuery('.modal-container [class^="close-fancyModal_"]').trigger('click');
   }
});