How do I get Reveal to work? #12292

AdamDSherman · 2021-10-15T03:30:56Z

AdamDSherman
Oct 15, 2021

I've followed the guides, and included all the following files:

    <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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.reveal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.keyboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.touch.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.triggers.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.mediaQuery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.3/js/plugins/foundation.util.motion.min.js"></script>

But I just can't get the modal to appear.

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

What am I doing wrong?