Geek Answers Handbook

Foundation 5 shows that modal open in javascript cannot be closed

I just migrate Foundation 4 to Foundation 5.

I had a problem with detecting a modality in foundation 5 (it worked in foundation 4!) When I open a modal expression with a jquery script: the display modality appears, but cannot be closed (neither by clicking on X, or by clicking on the background) Here is 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!

+5
source share
3 answers

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

, .

+2

. , , , . JS- $().ready();

0

In Foundation 6, the class has changed. To close the modal that you would add now:

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

So 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>
0
source

More articles:


All Articles