Question

我只是将Foundation 4迁移到Foundation 5。

当我使用jquery脚本打开一个显示模式时，我在基础5中显示模态（它在基础4中工作！）有问题：显示模式但不能关闭（无论是通过单击X，也没点击背景）这是我的代码：

<!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>`

知道为什么吗？

提前致谢！

Answer 1

当执行$（document）.foundation（）时，似乎必须在DOM中出现“.close-reveal-modal”链接。 http://foundation.zurb.com/forum/posts/483-foundation-5-reveal-modal-cant-be-closed

我改变了我的布局并且它有效。

Answer 2

我的愚蠢错误。忘了首先初始化基础，但看起来你确实初始化它。尝试将单击JS代码包装在$（document）.ready（）;

中

Answer 3

在Foundation 6中，班级已更改。要关闭您现在要添加的模式：

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

这样完整的集成看起来像这样

// 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>

基础5揭示在javascript中打开的模态无法关闭

3 个答案: