Zurb Foundation 4 Reveal Modal: Won't close

Question

I'm using Foundation 4.3.1 with Reveal 4.3.2 and jQuery 2.0.3. I'm successfully opening a modal programmatically with the following code:

$('.akita-modal-ajax').on('click', function (e) {
    e.preventDefault();

    var modalId = $(this).data('id'),
        url = $(this).attr('href');

    $('#' + modalId).foundation('reveal', 'open', {
        url: url;
    });
});

The code I'm using to attempt to close the modal is:

$('.akita-modal').on('click', '.close-reveal-modal',function () {
    console.log('click');
    $('.akita-modal').foundation('reveal', 'close');
});

And my modal (once opened):

<div id="myModal" class="akita-modal open" style="display: block; opacity: 1; visibility: visible; top: 50px;">
    <a class="close-reveal-modal">×</a>
    ...More content...
</div>

When I click to close the modal it registers the 'click' in the console but the modal remains open. Interestingly, if I ignore my custom classes and revert all references of 'akita-modal' back to 'reveal-modal' everything works as it should. But then I'm stuck with Reveal's default styles.

I have also tried:

$('.akita-modal').on('opened', function () {
    $('.akita-modal').on('click', '.close-reveal-modal',function () {
        console.log('click');
        $('.akita-modal').foundation('reveal', 'close');
    });
});

With the exact same result. The 'click' gets logged but the modal remains open. I have no other errors in my console, and I haven't come across anyone else with this issue other than maybe JoelCDoyle in response to another SO question: Revealing a Modal in Foundation 4

How can I get this modal to close using my own class names?

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

Pierre Pierre · Accepted Answer · 2013-09-11T09:48:37

Usually I use the modal Id to close it, like this :

$('#myModal').foundation('reveal', 'close');

And it works, so maybe it's a problem with using class names instead of IDs...?

Zurb Foundation 4 Reveal Modal: Won't close

2 Answers