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?

score 41 · Answer 1 · answered May 20 '13 at 20:54

41

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

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

answered May 20 '13 at 20:54

meatrobot

795
1
6
6

2

Thanks, that worked for me and made this cryptic message from the foundation docs clearer: "Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events." – Daniel Ristic Jul 02 '13 at 15:56

score 21 · Answer 2 · edited Oct 08 '14 at 08:08

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

I'm having trouble returning control to the parent view when the modal is closed. Perhaps you can help me. My question is here: https://stackoverflow.com/q/49161370/1735836 — Patricia, Mar 08 '18 at 16:03
In Foundation 6, replace: fndtn.reveal with zf.reveal, else this won't work. — Loosie94, Apr 06 '21 at 11:54

score 16 · Accepted Answer · answered Dec 07 '12 at 15:40

16

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

answered Dec 07 '12 at 15:40

chrisjsherm

1,269
13
17

I'm having trouble returning control to the parent view when the modal is closed. Perhaps you can help me. My question is here: stackoverflow.com/q/49161370/1735836 – Patricia Mar 08 '18 at 16:58

score 15 · Answer 4 · edited May 04 '17 at 01:05

15

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

edited May 04 '17 at 01:05

Floyd

2,252
19
25

answered Aug 19 '16 at 00:17

sequielo

1,541
1
18
27

1

On that note, you can also use this format: $('#myModal ').bind('closed.zf.reveal', function() { console.log("myModal closed!"); }); – JustinJason May 12 '17 at 15:04
@JustinJason The difference is that added examples will take care of forms added dynamically, while yours won't. Although that's a jQuery discussion – sequielo May 13 '17 at 16:30

score 4 · Answer 5 · answered Sep 17 '13 at 13:34

4

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

answered Sep 17 '13 at 13:34

Chris Roane

129
1
3

score 2 · Answer 6 · answered Feb 15 '14 at 10:47

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 :)

answered Feb 15 '14 at 10:47

James

557
7
16

for lightweight passing of options to a particular modal, this is definitely the way to go for foundation 5! not for callbacks like the OP wanted, but config options. – andy Jul 13 '14 at 16:39
You save my day. I cannot find that feature in Foundation Docs. Thanks! – Cartucho Feb 04 '15 at 16:24

score 1 · Answer 7 · edited Jul 08 '15 at 00:30

1

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

edited Jul 08 '15 at 00:30

L84

45,514
58
177
257

answered Mar 08 '14 at 18:57

djtek

176
1
3

score 1 · Answer 8 · answered Apr 26 '16 at 13:35

The foundation 5 documentation specifies scoping of reveal events to the 'reveal' eventspace. However, the actual modal events do not seem to fire consistently within this eventspace. Removing this specification fixes the issue:

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

score 0 · Answer 9 · answered Jul 06 '15 at 21:28

0

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

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

Regards, MarianoC.

answered Jul 06 '15 at 21:28

MarianoC

341
3
3

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

9 Answers9

Examples:

Linked