Il modale della Fondazione non funziona per me nel mio progetto.
Ho confermato che Foundation e jQuery sono caricati così come il CSS per il Foundation Modal per funzionare, ma non si attiva al clic come è.
È interessante notare che se corri
$(document).ready(function(){
var popup = new Foundation.Reveal($("#videoModal"));
popup.open();
});
Nella console del browser, appare la modale. Quindi, sono sicuro che js e css sono disponibili.
Non riesco a risolvere il motivo per cui l'evento click sull'ancora non lo spara come dovrebbe, ho seguito il consiglio in questa pagina: https://foundation.zurb.com/sites/docs/reveal.html
Il mio codice di prova:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Modal from Foundation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/assets/dist/styles/app.css">
</head>
<body>
<div style="margin-top: 200px;" class="video-callout">
<a data-open="videoModal">
<h6>Watch the video</h6>
</a>
</div>
<div class="reveal" id="videoModal" data-reveal>
<h1>Hey!</h1>
</div>
<script src="/assets/dist/scripts/vendor/jquery.min.js"></script>
<script src="/assets/dist/scripts/vendor/foundation.min.js"></script>
</body>
</html>
risposte:
0 per risposta № 1$(document).foundation();
È stato lasciato fuori dal documento e sembra essere il principale colpevole.