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

Question

I have a very simple page that simply has the following HTML, copied from the Zurb Foundation site:

 <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>

I added JQuery and the Foundation .js and .css files from the CDN:

  <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>

But the modal still doesn't fire.

I then added Foundation.core.min.js , with no luck. Then foundation.reveal.min.js also with no result.

I then tried to add a bunch of util .js files

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

Still with no result or errors in the console.

Am I missing something here? What can I do to get it to work?

Answer 1

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

$(document).foundation();