How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

Question

On zurb foundation\'s website at http://foundation.zurb.com/docs/reveal.php they listed some Options including

open: callback function that triggers \'before\' the

Answer 1

On Zurb Foundation v6, these events were renamed to xxx.zf.reveal:

• closeme.zf.reveal Fires immediately before the modal opens. Closes any other modals that are currently open
• open.zf.reveal Fires when the modal has successfully opened.
• closed.zf.reveal Fires when the modal is done closing.

Source: http://foundation.zurb.com/sites/docs/reveal.html#js-events

Examples:

• Generic callback that will fire for all modals:

  $(document).on('open.zf.reveal', '[data-reveal]', function() {
    console.log('This works');
  });
  

• Callback that will fire when a specific modal is opened:

  $(document).on('open.zf.reveal', '#<ELEMENT-ID>[data-reveal]', function() {
    console.log('This works');
  });
  

Answer 2

Looking at Foundation 5 and found that the reveal library triggers open, opened, close, and closed events. Just attach a handler to the event you want.

$('#myModal').on([event], handler)

You can also pass the handlers via the settings argument. Check this out: https://github.com/zurb/foundation/blob/master/js/foundation/foundation.reveal.js#L92

Answer 3

Like meatrobot said, to get this working you want to bind to the modal with the action you are targetting. I got this to work:

$('#myModal').bind('closed', function() {
    console.log("myModal closed!");
});

Answer 4

This is a little late but for the second part you add the attributes as a semi-colon separated list of values in the data-options attribute (tested with foundation 5), i.e:

<div id="myModal" data-options="close_on_background_click:false;" class="reveal-modal">

And no, you cannot pass functions this way, i tried :)

Answer 5

In foundation 3.2.5 you should bind 'reveal:opened' like this:

$('#myModal').bind('reveal:opened', function() {
   console.log("myModal opened");
});

Regards, MarianoC.

Answer 6

Event Bindings for Zurb Foundation Reveal -

There are a series of events that you can bind to for triggering callbacks:

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

If you have multiple data-reveal used in single page as follows :

<div class="content reveal-modal" id="element-1" data-reveal>
<div class="content reveal-modal" id="element-2" data-reveal>

Then in this situations you can trigger callback same as explained above but with little modification as shown below :

$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
  // your code goes here...
});

$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
  // your code goes here...
});