javascriptjqueryzurb-foundationzurb-foundation-6

Foundation fire event on modal close?


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">

Solution

  • 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