Detect jquery reveal plugin modal close by esc key or clicking outside

Question

I am using jquery reveal plugin for showing pop-up. I am looking for a way in jquery or javascript by which I can trigger an appropriate event when that popup was closed by pressing esc key or clicking outside of pop-up. Is there any way by which I can capture this event?

And on reveal plugin website only few options are given, like:

$('#myModal').reveal({
 animation: 'fadeAndPop',                   //fade, fadeAndPop, none
 animationspeed: 300,                       //how fast animtions are
 closeonbackgroundclick: true,              //if you click background will modal close?
 dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
});

Are there any more options for this plugin? If so, please provide me link for that.

Answer 1

According to the source an Event called 'reveal:close' is fired in both cases and you should be able to add your own handler for that event through

$yourModal.bind('reveal:close', function () {
  console.log('Modal closed');
});

When you need to know in which way it was closed you could use the 'reveal:open' event to add either a keyup event handler on the document-object or a click event handler on the .reveal-modal-bg element.

$yourModal.bind('reval:open', function () {
  var $document = $(document);
  $document.bind('keyup', function onEscHandler( event ) {
    if (event.which === 27) {
      console.log('closed by ESC');

      // Modal is closed, let's remove the handler again
      $document.unbind('keyup', onEscHandler);
    }
  });


  var $modal_bg = $('.reveal-modal-bg');
  $modal_bg.one('click', function onBgClidkHandler() {
    console.log('closed by click on BG');
    // We don't need to remove this handler since 'one' does it automatically.
  });
});

Answer 2

1. Open jquery.reveal.js.

2. Add new option:

   var defaults = {
animation: 'fadeAndPop', animationspeed: 300, closeonbackgroundclick: true, dismissmodalclass: 'close-reveal-modal' escape: true // true: modal close with Esc. false: modal no close with Esc };

3. In the file jquery.validate, find the line that content e.which===27.

   Complete line is:

   if(e.which===27){ modal.trigger('reveal:close'); }

4. Modify and validate new option escape in this line:

   if(e.which===27 && options.escape === true){ modal.trigger('reveal:close'); }

5. That's it. Now the escape option works.