Bootstrap Modal Beispiel zeigt nicht

Ich teste Bootstrap Modal Beispiel „live demo“ und ich habe Bootstrap jquery und js in bootstrap starter template enthalten und auch die benutzerdefinierte javascript:Bootstrap Modal Beispiel zeigt nicht

$('#myModal').on('shown.bs.modal', function() { 
    $('#myInput').focus() 
})

aber den modalen Lauf aus Mein Texteditor zeigt nicht wie der auf seiner Website. Ich klicke auf den Knopf und nichts passiert. Ich habe versucht, mit Google Chrome Inspector/Konsole und es zeigt:

Uncaught ReferenceError: $ is not defined

an der Linie, wo die Funktion gestartet. Wenn ich die benutzerdefinierte JS entferne, wird kein Fehler angezeigt, aber das Modal wird nicht in Chrome, Edge oder Firefox angezeigt.

Mein Code ist nur die Kombination aus Bootstrap-Starter-Vorlage und seinem modalen Live-Demo-Code im Körper, so dass es keinen Grund gibt, den Code hier zu posten.

Bitte beachten Sie, dass ich den Code Arbeit machen könnte (die Taste funktioniert wie das Beispiel auf Bootstrap-Website gezeigt) durch eine ID auf die Taste zuweisen:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button">

dann später eine benutzerdefinierte Funktion hinzu:

<script type="text/javascript"> 
    $("#button").click(function() { 
     $('.modal').modal('show'); 
    }); 
</script>

Das ist jedoch nicht das gleiche wie der von Bootstrap bereitgestellte Beispielcode.

Quelle

2017-07-27 Viet

Sie vergessen zu laden jquery.min.js –

Sie können auch Ihren HTML-Code auch –

erwähnen Sie müssen Jquery vor bootstrap.js – Morteza

-1

bedeutet, dass Sie Ihr Skript ausführen, bevor das Dokument fertig ist. Versuchen Sie das

Quelle

2017-07-27 17:39:00

eine Sekunde, warum runter? können Sie erklären? –

Ich habe nicht downvote, aber das Problem des Fragestellers ist mit '$' (alias Jquery), nicht das Laden von DOM. – Kevin

Ja, weil jquery noch nicht geladen wurde. Das ist der Grund, warum er "$ undefined" Fehler bekommt. –

Dieser Fehler tritt im Allgemeinen auf, da Sie versuchen, JQuery zu verwenden, ohne es zuvor in Ihrem Projekt verwiesen zu haben.

Versuchen das Hinzufügen der folgenden an die Spitze Ihrer Seite:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Quelle

2017-07-27 17:50:17

Danke G.Hunt. Ihr Code stoppt die Fehlermeldung, wenn ich die benutzerdefinierte js an die Spitze setze. Wenn ich die benutzerdefinierte js auf den Boden des Körpers setze, wird es nicht benötigt, da es bereits Links zu jquery durch Bootstrap-Starter gibt. Trotzdem macht der Knopf nichts. – Viet

Vielen Dank für Ihre Anregungen. Ich habe die Antwort herausgefunden: Der Beispielcode von Bootstrap hat einen Fehler:

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button>

die data-target="" die ID des modalen enthalten sollte, die in diesem Fall ist #myModal nicht #exampleModal.

Quelle

2017-07-27 19:10:14 Viet

Bootstrap Modal Beispiel zeigt nicht

Antwort

Verwandte Themen