Tengo una página muy simple que simplemente tiene el siguiente HTML, copiado del sitio de la Fundación Zurb:

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

Agregué archivos JQuery y Foundation .js y .css del 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>

Pero el modal todavía no se dispara.

Luego agregué Foundation.core.min.js , sin suerte. Luego, foundation.reveal.min.js también sin resultado.

Luego traté de agregar un montón de archivos util .js

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

Todavía sin resultado ni errores en la consola.

¿Me estoy perdiendo de algo? ¿Qué puedo hacer para que funcione?