1

我希望有人能够帮助解决这个问题。我似乎无法让 Foundation 6 中的模态显示动画正常工作。我基本上直接从他们的文档中复制并粘贴了它，但什么也没有。我看到其他人遇到了问题，但他们的解决方案似乎都没有帮助我。

这是我的完整代码。

<!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">&times;</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>

任何帮助将不胜感激。:)

谢谢，

4

2 回答 2

2

我认为您没有包含 Motion-UI css 文件，您将需要它来为模态设置动画。

https://cdnjs.cloudflare.com/ajax/libs/motion-ui/1.1.1/motion-ui.min.css

请参阅从文档复制的代码的工作示例。 http://codepen.io/shoaibik/pen/RRwWKg

于 2016-05-27T17:48:31.560 回答
0

在 Foundation 文档http://foundation.zurb.com/sites/docs/reveal.html中，我看到他们在按钮中使用 data-open 属性。我希望您应该使用数据打开而不是数据切换。

<p><a data-open = "animatedModal10">Click me for a modal</a></p>
于 2016-05-27T12:14:00.950 回答