Foundation 5 reveal modal opened in javascript can't be closed

5
votes

I just migrate Foundation 4 to Foundation 5.

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>$(document).foundation()</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 !

3
jqueryzurb-foundation
I will second this question. Having similar issue after upgrading to Foundation 5: modal will not close after being opened. Only difference is I am added the Modal HTML to the document manually, rather than appending with JS as above. – Logic Artist
Same issue here. I could only close it via javascript clicking a.close-reveal-modal or clicking on the background doesn't work. – slobodan.blazeski
hopefully you don't have that backtick in your real code at the very bottom? – Nathaniel Flick

3 Answers

2
votes

It seems that ". close-reveal-modal" link, must be present in the DOM, when the $(document).foundation() is executed. http://foundation.zurb.com/forum/posts/483-foundation-5-reveal-modal-cant-be-closed

I've changed my layout and it works.

0
votes

Silly mistake on my part. Forgot to initialize foundation first, however it appears you did initialize it. Try wrapping your click JS code inside a $(document).ready();

0
votes

In Foundation 6 the class has changed. To close the modal you'd add as of now: 

<button class="close-button" data-close aria-label="Close modal" type="button">
 <span aria-hidden="true">&times;</span>
</button>

So that the full integration looks like this

// load css in head
<link rel='stylesheet' type='text/css' href='/foundation/css/foundation.min.css'>

// depending on your DOM you might have to set the box model like so
<style>
  .*, ::after, ::before {
   box-sizing: unset; // alternatively use content-box
  }
</style>

// this would be your link
 <p><a data-open='exampleModal_132'>Learn Open the modal</a></p>

// this would be your modal 
<div class='reveal' id='exampleModal_123' data-reveal>

  <h1>Awesome. I Have It.</h1> 

  <p class='lead'>Your couch. It is mine.</p>

  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>

 <button class='close-button' data-close aria-label='Close modal' type='button'>

   <span aria-hidden='true'>&times;</span>

 </button>

</div>

// before closing body
<script src='/foundation/js/vendor/jquery.js'></script>
<script src='/foundation/js/vendor/foundation.min.js'></script>
<script src='/foundation/js/vendor/what-input.js'></script>

<script>$(document).foundation();</script>