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 modal opens.

opened: callback function that triggers 'after' the modal is opened.

close: callback function that triggers 'before' the modal prepares to close.

closed: callback function that triggers 'after' the modal is closed.

But I have no idea how to use them with my modal. I tried:

$('#myModal').closed(function()
{});

$('#myModal').trigger('reveal:closed')(
{});

$('#myModal').reveal.closed(function()
{});

$('#myModal').reveal().closed(function()
{});

I have Googled but found no hits. Anyone who can explain it or give me an example or provide a related link?

The suggestion given works, however I have yet another closely related question for reveal():

<a href="#" class="button" data-reveal-id="myModal2">Click Me For A Modal</a>);

I tried to add one attribute like data-closeOnBackgroundClick="false" That doesn't seem to work. What should be the correct syntax? Will it work for callback function as well?

Answer 1

The above answer did not work for me. Here's what worked (Foundation 4 and jQuery):

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

Answer 2

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...
});

Answer 3

Call reveal like you normally would, but include the name of the option and corresponding function as an object:

//Reveal the modal and say "Good bye" when it closes
$("#myModal").reveal({ "closed": function () { alert("Good bye") } });

Answer 4

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');
  });