Menu icon Foundation
Reveal Won't Close

Hello,

I'm new to Foundation but this all seems pretty straightforward, however I'm having a heck of a time getting my Reveal modal to close. I'm launching a modal that already exists in the code via JavaScript because I have to load some dynamic content into a div within the modal window. After some work I have the modal opening on the link click and everything is fine. But if I try to close it using the close link, escape key, or background click it doesn't do anything.

I've tried letting the close class do the work and it doesn't close. I've tried closing it via JavaScript and this also doesn't work. The click event does fire but the modal close action doesn't take place. Can anyone help me out on this? I'm sure it's a simple mistake I'm missing.

I've included my modal code as well as the open JS and close JS. I can't publish the actual URL to this page.

<div id="gallery-modal" class="reveal-modal gallery" data-reveal>
  <a class="close-reveal-modal" data-reveal>Close [x]</a>
  <div id="gallery-modal-inner"></div>
</div>
            

         

 $('span#masthead-gallery a').on('click', function(e) {
    e.preventDefault();
    
    // redacted code
    
    $('div#gallery-modal').foundation('reveal', 'open');
});           

         

$('div#gallery-modal a.close-reveal-modal').on('click', function(e) {
    $('div#gallery-modal').foundation('reveal', 'close');
});
            

         

revealjavascriptopencloseAJAXjquery

Hello,

I'm new to Foundation but this all seems pretty straightforward, however I'm having a heck of a time getting my Reveal modal to close. I'm launching a modal that already exists in the code via JavaScript because I have to load some dynamic content into a div within the modal window. After some work I have the modal opening on the link click and everything is fine. But if I try to close it using the close link, escape key, or background click it doesn't do anything.

I've tried letting the close class do the work and it doesn't close. I've tried closing it via JavaScript and this also doesn't work. The click event does fire but the modal close action doesn't take place. Can anyone help me out on this? I'm sure it's a simple mistake I'm missing.

I've included my modal code as well as the open JS and close JS. I can't publish the actual URL to this page.

<div id="gallery-modal" class="reveal-modal gallery" data-reveal>
  <a class="close-reveal-modal" data-reveal>Close [x]</a>
  <div id="gallery-modal-inner"></div>
</div>
            

         

 $('span#masthead-gallery a').on('click', function(e) {
    e.preventDefault();
    
    // redacted code
    
    $('div#gallery-modal').foundation('reveal', 'open');
});           

         

$('div#gallery-modal a.close-reveal-modal').on('click', function(e) {
    $('div#gallery-modal').foundation('reveal', 'close');
});
            

         
Brandon Parker over 4 years ago

Hello,

Has anyone else seen this? This is an annoying bug that I'm sure is something very simple. Any help is greatly appreciated.

Thanks!

Brandon Parker over 4 years ago

Until there's a better solution I have to keep this project moving so I've manually done the following since the close never works. I lose the pretty transitions but at least I have a working modal that can be closed.

$('div#gallery-modal a.close-reveal-modal').on('click', function(e) {
    e.preventDefault();
    $('div#gallery-modal').foundation('reveal', 'close'); // this never works
    $('div#gallery-modal').removeClass('open').hide().css('visibility', 'hidden').css('top', '6.25rem').css('opacity', 0);
    $('div.reveal-modal-bg').hide();
  });

Monji over 4 years ago

Hey Brandon,

I've been experiencing the same issue since upgrading to 5.5.0 using the foundation-rails gem.

I tried a multitude of different fixes and have been unable to troubleshoot what is causing the exact issue, so I've used a similar workaround to yours (in Coffeescript):

closeModal: (ev) =>
    $(".reveal-modal-bg").hide()
    $("#modal").attr("class", "reveal-modal").unbind().fadeOut()
    ev.preventDefault()

Another thing to note is that upgrading also broke the accordion functionality for me, and equalizer never seemed to work either.

Good luck!