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

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

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

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

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