Foundation 6 Modal Reveal 不起作用
Foundation 6 Modal Reveal not working
我希望有人能够帮助解决这个问题。我似乎无法在 Foundation 6 中获得模态显示的动画。我基本上是直接从他们的文档中复制并粘贴的,但什么也没有。我看到其他人遇到了问题,但 none 他们的解决方案似乎对我有所帮助。
这是我的完整代码。
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/themeat.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<p><a data-toggle="animatedModal10">Click me for a modal</a></p>
<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
<h1>Whoa, I'm dizzy!</h1>
<p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/view.js?auto"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</script>
</body>
</html>
如有任何帮助,我们将不胜感激。 :)
谢谢,
在基金会文档中http://foundation.zurb.com/sites/docs/reveal.html,
我看到他们在按钮中使用 data-open 属性。我希望你应该使用 data-open 而不是 data-toggle。
<p><a data-open = "animatedModal10">Click me for a modal</a></p>
我想你还没有包含 Motion-UI css 文件,你将需要它来制作模态动画。
https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css
请参阅使用从文档复制的代码的工作示例。
http://codepen.io/shoaibik/pen/RRwWKg
我希望有人能够帮助解决这个问题。我似乎无法在 Foundation 6 中获得模态显示的动画。我基本上是直接从他们的文档中复制并粘贴的,但什么也没有。我看到其他人遇到了问题,但 none 他们的解决方案似乎对我有所帮助。
这是我的完整代码。
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="stylesheet" href="css/themeat.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<p><a data-toggle="animatedModal10">Click me for a modal</a></p>
<div class="reveal" id="animatedModal10" data-reveal data-close-on-click="true" data-animation-in="spin-in" data-animation-out="spin-out">
<h1>Whoa, I'm dizzy!</h1>
<p class='lead'>There are many options for animating modals, check out the Motion UI library to see them all</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<script src="js/view.js?auto"></script>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
</script>
</body>
</html>
如有任何帮助,我们将不胜感激。 :)
谢谢,
在基金会文档中http://foundation.zurb.com/sites/docs/reveal.html, 我看到他们在按钮中使用 data-open 属性。我希望你应该使用 data-open 而不是 data-toggle。
<p><a data-open = "animatedModal10">Click me for a modal</a></p>
我想你还没有包含 Motion-UI css 文件,你将需要它来制作模态动画。
https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css
请参阅使用从文档复制的代码的工作示例。 http://codepen.io/shoaibik/pen/RRwWKg