Skip to main content
 首页 » 编程设计

jquery之Foundation 5 显示在 javascript 中打开的模式无法关闭

2026年05月17日49davidwang456

我刚刚将 Foundation 4 迁移到 Foundation 5。

当我使用jquery脚本打开显示模式时,我在foundation 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>` 

知道为什么吗?

提前致谢!

请您参考如下方法:

当执行 $(document).foundation() 时,似乎“.close-reveal-modal”链接必须存在于 DOM 中。 http://foundation.zurb.com/forum/posts/483-foundation-5-reveal-modal-cant-be-closed

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