/ / Foundation [6.4.3] & jQuery [3.2.1] Reveal Modal funktioniert nicht - jquery, modal-dialog, zub-foundation, zurb-foundation-6

Foundation [6.4.3] & jQuery [3.2.1] Reveal Modal funktioniert nicht - jquery, modal-dialog, zub-foundation, zub-foundation-6

Das Modal der Foundation funktioniert in meinem Projekt nicht.

Ich habe bestätigt, dass sowohl Foundation und jQuery als auch das CSS für das Foundation Modal geladen sind, aber es funktioniert nicht beim Klicken wie es ist.

Interessanterweise, wenn Sie laufen

$(document).ready(function(){
var popup = new Foundation.Reveal($("#videoModal"));
popup.open();
});

In der Browserkonsole wird das Modal angezeigt. Also, ich bin zuversichtlich, dass die js und css verfügbar sind.

Ich kann nur nicht herausfinden, warum das Click-Ereignis auf dem Anker nicht so funktioniert, wie es sollte. Ich habe den Rat auf dieser Seite befolgt: https://foundation.zurb.com/sites/docs/reveal.html

Mein Testcode:

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

Antworten:

0 für die Antwort № 1
$(document).foundation();

Wurde aus dem Dokument weggelassen und das scheint der Hauptschuldige zu sein.