Menu icon Foundation
Foundation 5 reveal modal can't be closed

Hi there,

I just migrate F4 -> F5.
I have a problem with reveal modal in foundation 5 (it worked in foundation 4 !) when I open a reveal modal using a jquery script : The reveal modal appears but can't be closed (neither by clicking on the X, nor by clicking on the background)

Here's my code :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    
    <!-- The button -->
    <p><a href="#" class="add2cart button">Reveal Modal</a></p>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>

    <script type="text/javascript">
    
      $(document).on("click",".add2cart",function(){

          //Create the reveal modal in DOM
          $('body').append('<div id="added2cart" class="reveal-modal small" data-reveal><p>My reveal-modal appears but can\'t be closed !</p><a class="close-reveal-modal">&#215;</a></div>');

          //Open the reveal modal
          $('#added2cart').foundation('reveal', 'open');

      });
    </script>
  </body>
</html>

Any idea why ?

Thanks in advance !

revealmodaljqueryFoundation 5close

Hi there,

I just migrate F4 -> F5.
I have a problem with reveal modal in foundation 5 (it worked in foundation 4 !) when I open a reveal modal using a jquery script : The reveal modal appears but can't be closed (neither by clicking on the X, nor by clicking on the background)

Here's my code :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    
    <!-- The button -->
    <p><a href="#" class="add2cart button">Reveal Modal</a></p>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>

    <script type="text/javascript">
    
      $(document).on("click",".add2cart",function(){

          //Create the reveal modal in DOM
          $('body').append('<div id="added2cart" class="reveal-modal small" data-reveal><p>My reveal-modal appears but can\'t be closed !</p><a class="close-reveal-modal">&#215;</a></div>');

          //Open the reveal modal
          $('#added2cart').foundation('reveal', 'open');

      });
    </script>
  </body>
</html>

Any idea why ?

Thanks in advance !

Emil Kampp over 5 years ago

I think, that the ". close-reveal-modal" link, must be present in the DOM, when the $(document).foundation() is executed.

Ben Saufley over 5 years ago

I don't understand this. Foundation wary of using $(document).on? Why wouldn't this work for created elements?

I've solved this by using a simple (coffeescript) listener:

  $(document).on 'click tap', '.close-reveal-modal, .reveal-modal-bg', ->
    $('[data-reveal]').foundation('reveal','close')

Nigel Ingham over 5 years ago

Ah I was scratching my head as well (upgraded to 5 from 4) then realised I had missed in Zurbs docs for Foundation 5 Reveal that you need to add 'data-reveal' to your div.

div id="loginModal" class="reveal-modal xlarge" data-reveal

Im working good now!

Arie Stavchansky over 5 years ago

I'm having the same issue with Foundation 5 Reveals not closing on any iOS device. Everything is working fine in Safari, Firefox, and Chrome--I can open and close the model in those browsers. I am launching the modal via javascript.

Here is the code I am using:

$('.service').click(function(e){

                    var videokey = $(e.currentTarget).attr('data-youtube-key');

                    $('#screencast-modal').foundation('reveal', 'open', { 
                        url: 'screencast.php',
                        data: { 
                                vname: $(e.currentTarget).find('h5').html()
                               ,embedlink: videokey
                              }
                    })

I didn't think I needed to assign a handler to an element to close it. I've read a couple of threads about reveal not closing. Any ideas to get it working on iOS?

Thanks,
Arie

Nimrod A about 5 years ago

Ben's solution worked for me, but i had to add the listener to the 'touchstart' event.
Thanks, Ben!

Final code (JS):

$(document).on('click tap touchstart', '.reveal-modal-bg', function() {
    return $('[data-reveal]').foundation('reveal', 'close');
});