How to use Zurb Foundation reveal with open, opene

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. Itried

$('#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?

Thank you! It works!

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 doen'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

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 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!");
});