我刚刚将 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">×</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
我改变了布局并且它有效。
