Es kann eigentlich nur in der Einbindung der einzelnen CSS- und Java-Datei sein, dies habe ich aber auch schon geprüft.
Nur allein darauf kann es hinauslaufen. Oder was haben deine Überprüfungen so ergeben?
Hier das funktionstüchtige Bootstrap-Modal, wenn die Dateien korrekt eingebunden sind/geladen wurden:
Anhand der Bootstrap-Basisvorlage und -Beispiele hättest du studieren können, wo grundsätzlich der JavaScript-Part (jQuery, Bootstrap) im HTML-Code zu notieren ist:
Nämlich am Ende der Seite, unmittelbar vor
</body></html>.
Und was gibt's von meiner Seite ansonsten noch zu empfehlen?
HTML:
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/smooth%20scrolling.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap.js"></script>
Die Zeilen #1, #3 und #8 entfallen komplett, weil sie in der Produktivumgebung als minimierter/komprimierter Code (*
.min.css, *
.min.js) zum Einsatz kommen.
Falls deine Seite nicht über
https:// , sondern "nur"
http:// läuft/erreichbar ist, entferne in Zeile #5 das HTTPS-Protokoll im URL (incl. dem Doppelpunkt):
HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Ansonsten läufst du Gefahr, dass Browser dies als "Gemischten Inhalt" einstufen, und aus Sicherheitsgründen den Request blocken, womit jegliche Bootstrap-/jQuery-Scripts ihren Dienst einstellen.
Eventuell ist genau das der Grund, dass es bei dir nicht funktioniert.
Zu guter letzt:
1. Das Attribut
language="javascript" in Zeile #6 ist ein Relikt aus vergangenen Zeiten, und hat in HTML5 nichts verloren.
2. Zwecks der Kompatibilität ist in Dateinamen auf Leerzeichen zu verzichten:
https://wiki.selfhtml.org/wiki/HTML/Regeln/Konventionen_für_Dateinamen#Dateinamen_im_Hinblick_auf_Kompatibilit.C3.A4t
_______________________________
* Beachte den grundsätzlichen Unterschied in unser beider HTML-Codes. Im "HTML"-Frame wird nur das eingetragen, was sich in deiner Seite zwischen
<body></body> befindet.
Externe Dateien, wie die von Bootstrap, können links aussen über External Resources geladen werden.
JS-Code wird (ohne
<script></script>) im "JavaScript"-Frame notiert. Über das "Settings"-Icon kann dort auch zwischen diversen JS-Frameworks gewählt werden (in diesem Fall jQuery).
JSFiddle weist dich in deinem Fiddle aber auch darauf hin:
jsfiddle.net schrieb:
- No need for the META tags.
- No need for the HEAD tag, it's already in the output.
- For JavaScript use the panel below or the Resources panel for external files.
- For external CSS files use the Resources panel on the left.
