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

javascript callback modal-dialog zurb-foundation dom-events
user1882562 picture user1882562 · Dec 6, 2012 · Viewed 34.3k times · Source

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

meatrobot picture meatrobot · May 20, 2013

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

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

Related questions

How can I pass a parameter to a setTimeout() callback?

I have some JavaScript code that looks like: function statechangedPostQuestion() { //alert("statechangedPostQuestion"); if (xmlhttp.readyState==4) { var topicId = xmlhttp.responseText; setTimeout("postinsql(topicId)",4000); } } function postinsql(topicId) { //alert(topicId); } I get an error that topicId is not defined Everything was working before …

Read More
How to make a function wait until a callback has been called using node.js

I have a simplified function that looks like this: function(query) { myApi.exec('SomeCommand', function(response) { return response; }); } Basically i want it to call myApi.exec, and return the response that is given in the callback lambda. However, the above …

Read More
How to access the correct `this` inside a callback?

I have a constructor function which registers an event handler: However, I'm not able to access the data property of the created object inside the callback. It looks like this does not refer to the object that was created but …

Read More