如何让 Zurb Foundation 的 Reveal/Modal 发挥作用？

Question

我有一个非常简单的页面，其中仅包含以下 HTML，从 Zurb Foundation 站点复制：

 <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>
      <p class="lead">Your couch. It is mine.</p>
      <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

我从 CDN 添加了 JQuery 和 Foundation .js 和 .css 文件：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>

但是模式仍然没有触发。

然后我添加了 Foundation.core.min.js，但没有成功。然后foundation.reveal.min.js也没有结果。

然后我尝试添加一堆 util.js 文件

foundation.util.keyboard.js
foundation.util.touch.js
foundation.util.triggers.js
foundation.util.mediaQuery.js
foundation.util.motion.js

控制台中仍然没有结果或错误。

我是不是漏掉了什么？我该怎么做才能让它发挥作用？

Answer 1

原来你需要在 JS 中初始化 Foundation

$(document).foundation();

如何让 Zurb Foundation 的 Reveal/Modal 发挥作用？

How to get Zurb Foundation's Reveal/Modal to work?

javascript

jquery

zurb-foundation