Zurb Foundation 5 显示模态不起作用 [英] Zurb Foundation 5 reveal modal not working
本文介绍了Zurb Foundation 5 显示模态不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 zurb 基础 5 显示模式.但是当我点击按钮时它不起作用并且没有打开.我正在使用这个 html 代码.
<头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link type="text/css" rel="stylesheet" href="css/foundation.css"/><link type="text/css" rel="stylesheet" href="css/normalize.css"/><title>索引</title><身体><div id="myModal" class="reveal-modal" data-reveal><h2>棒极了.我有.</h2><p class="lead">你的沙发.这是我的.</p><p>我是一个很酷的段落，它生活在一个更酷的模态中.胜利<a class="close-reveal-modal">×</a><a class="button" href="#" data-reveal-id="myModal">点击一个模态</a><script src="js/vendor/jquery.js"></script><script src="js/foundation/foundation.js"></script><script src="js/foundation/foundation.reveal.js"></script><script type="text/javascript">$('#myModal').foundation();</html>
解决方案
将最后一个脚本标签更改为:
I am trying to use zurb foundation 5 reveal modal. But it's not working and not open when I click on button. I am using this html code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="css/foundation.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<title>index</title>
</head>
<body>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a> </div>
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
$('#myModal').foundation();
</script>
</body>
</html>
解决方案
Change the last script tag to this:
<script type="text/javascript">
$(document).foundation();
</script>
这篇关于Zurb Foundation 5 显示模态不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
