Foundation fire event on modal close?

3
votes

I'm using foundation reveals within my application to send information via AJAX. Everything is working but upon the modal closing I want to change some text. How do you fire a function when a modal closes with Foundation 6? Any help would be great, my current code is as follows:

$("#share_modal").foundation('reveal', 'close', function() {
    alert("closed");
});

I'm getting the error

Uncaught ReferenceError: We're sorry, 'reveal' is not an available method for this element.

But the element I'm referring to is the .reveal

<div class="reveal" id="share_modal" data-reveal data-options="closeOnClick:true; closeOnEsc: true;">
    <div class="row">
2
javascriptjqueryzurb-foundationzurb-foundation-6

2 Answers

9
votes

With Foundation 6, the events are a little different. 

(function ($, window, undefined) {
  'use strict';

  $('[data-reveal]').on('closed.zf.reveal', function () {
    var modal = $(this);
    alert('closed');
  });

  $(document).foundation();


})(jQuery, this);

That will target all reveals. If you want to target just #share_modal change the selector from $('[data-reveal]') to $('#share_modal') or you can use modal.id to check the element id. It may be modal.attr('id')

Reference: http://foundation.zurb.com/sites/docs/reveal.html#js-events

1
votes

Foundation 5

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
     alert('closed!!!');
});