我如何使用 Foundation 6 的 Javascript？

Question

我想使用 Foundation 6 的 Reveal（模态）插件。

我已添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/plugins/foundation.interchange.min.js"></script>

到我头上。这些加载正常 - 没有 404。

我在下面添加了：

<script>
  $(document).foundation();
</script>

最后，我添加了模态代码，从他们的站点逐字复制：

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

<div class="reveal" id="exampleModal1" data-reveal>
 <h1>Awesome. I Have It.</h1>
 <button class="close-button" data-close aria-label="Close modal" type="button">
 <span aria-hidden="true">&times;</span>
 </button>
</div>

然而，没有任何效果。

检查控制台我看到错误：

Uncaught TypeError: Cannot read property 'Foundation' of undefined

关于foundation.min js，以及

Uncaught TypeError: Super expression must either be null or a function, not undefined

在揭示文件中。

有人知道我能做些什么来解决这个问题吗？

Answer 1

您已经将所有基础 JS 包含在第一个脚本标签中。后两者会造成冲突。还包括基金会 CSS。

<html>
<head>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0-rc.1/js/foundation.min.js"></script>
</head>
<body>
<p>
    <button class="button" data-open="exampleModal1">Click me for a modal</button>
</p>

<div class="reveal" id="exampleModal1" data-reveal>
    <h1>Awesome. I Have It.</h1>
    <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<script>
    jQuery( document ).ready( function ( $ ) {
        $( document ).foundation();
    } );
</script>
</body>
</html>

我如何使用 Foundation 6 的 Javascript？

How do I use Foundation 6's Javascript?

javascript

jquery

zurb-foundation