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>

但是，什么都没有。

检查控制台，我看到错误：

未捕获的TypeError：无法读取未定义的属性“ Foundation”

在foundation.min js和

未捕获的TypeError：超级表达式必须为null或函数，且未定义

在显示文件上。

有人知道我该怎么做吗？

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？

1 个答案: