Foundation [6.4.3] & jQuery [3.2.1] Reveal Modal funktioniert nicht

-2

Foundation Modal funktioniert nicht für mich in meinem Projekt.Foundation [6.4.3] & jQuery [3.2.1] Reveal Modal funktioniert nicht

Ich habe bestätigt, dass Foundation und jQuery sowie das CSS für das Foundation Modal geladen sind, aber es wird nicht beim Klicken ausgelöst, wie es ist.

Interessanterweise, wenn Sie

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

im Browser-Konsole ausführen, wird die modal. Also, ich bin zuversichtlich, dass die js und css verfügbar sind.

Ich kann einfach nicht lösen, warum das Click-Ereignis auf dem Anker es nicht wie es sollte auslösen soll. Ich habe den Rat auf dieser Seite eintragen: 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>

Quelle

2017-11-08 phillipmaddox

Haben Sie JavaScript-Fehler festgestellt (verwenden Sie die F12-Browser-Tools)? –

Dies ist der einzige Fehler, der in der Konsole angezeigt wird. Ich glaube, dass er mit einer Chrome-Erweiterung zusammenhängt. Ich bekomme keine Fehler beim Ausführen in Safari und der Klick löst immer noch nicht das Modal aus. Was ist seltsam für mich ist, dass wenn ich onclick = "foo()" zum Anker-Tag-Element hinzufügen und definieren Sie diese Funktion: 'foo =() => { console.log ('angeklickt!'); neue Foundation.Reveal ($ ('# videoModal')). Open(); } ' Es feuert das Modal. Offensichtlich sollte das nicht notwendig sein, aber es deutet darauf hin, dass das Daten-Offen-Attribut es nicht tut, denke ich? – phillipmaddox

$(document).foundation();

wurde aus dem Dokument links und das scheint der Hauptschuldige zu sein.

Quelle

2017-11-08 22:31:18 phillipmaddox

Foundation [6.4.3] & jQuery [3.2.1] Reveal Modal funktioniert nicht

Antwort

Verwandte Themen