3

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">
Eric Aya
  • 69,473
  • 35
  • 181
  • 253
Joe Scotto
  • 10,936
  • 14
  • 66
  • 136

2 Answers2

11

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

Gavin Bruce
  • 1,799
  • 16
  • 28
2

Foundation 5

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
     alert('closed!!!');
});
tokhi
  • 21,044
  • 23
  • 95
  • 105