Grüßt euch Leute,
ich möchte auf meiner Startseite mit einem Button ein Modal öffnen. Der Inhalt des Modals befindet sich in einer anderen Datei, also nicht in der index.html, sondern in der Test.html.
Ich bekomme das mit
nicht hin (wäre auch zu schön gewesen).
Was muss ich jetzt indem data-target noch angeben, damit es funktioniert bzw. funktioniert das so überhaupt?
Die Datei liegt im selben Verzeichnis.
Ich würde mich über eure Hilfe freuen.
Gruß Christian
Siehe remote:
[ul]
[li] https://getbootstrap.com/javascript/#modals-options [/li]
[li] http://holdirbootstrap.de/javascript/#modals-options [/li][/ul]
Sofern sich der Inhalt in einer anderen Datei befindet, erfordert das die Einbindung als Child-Element mittels entsprechender Frameworks und fortgeschrittene JavaScript-Kenntnisse. Das Data-Attribut von Bootstrap hilft dir hier nicht weiter.
Siehe hierzu auch der Hinweis von offizieller Seite:
So ich habe das mal mit Bootstrap ausprobiert und einfach mal das Beispiel kopiert.
Ich weiß nicht was Phase ist, aber ich hab irgendeinen Fehler gemacht, denn wenn ich das Modal öffne, schließt es sich sofort und somit sinnfrei so etwas einzubauen.
Es kann eigentlich nur in der Einbindung der einzelnen CSS- und Java-Datei sein, dies habe ich aber auch schon geprüft.
Hier zu ein Link wo ihr meinen Script nach lesen könnt → https://jsfiddle.net/Christian_01/3jbm0erd/#&togetherjs=opknwdNdyK
Gruß Christian
Ich sehe da kein Modal.
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:
[ul]
[li] https://jsfiddle.net/SpiceLab/jxsnLrb5/ [SIZE=5]*[SIZE=3] - siehe Fußnote -[/SIZE][/SIZE][/li][/ul]
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:
[ul]
[li] https://getbootstrap.com/getting-started/#template [/li][li] https://getbootstrap.com/getting-started/#examples [/li][/ul]
[ul]
[li] http://holdirbootstrap.de/los-gehts/#template [/li][li] http://holdirbootstrap.de/los-gehts/#examples [/li][/ul]
Nämlich am Ende der Seite, unmittelbar vor .
Und was gibt’s von meiner Seite ansonsten noch zu empfehlen?
[code=html]
[/code]Die Zeilen #1, #3 und #8 entfallen komplett, weil sie in der Produktivumgebung als minimierter/komprimierter Code (*[B].min[/B].css, *[B].min[/B].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):
<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:
[SIZE=1]_______________________________[/SIZE]
[SIZE=5]*[/SIZE] Beachte den grundsätzlichen Unterschied in unser beider HTML-Codes. Im „HTML“-Frame wird nur das eingetragen, was sich in deiner Seite zwischen befindet.
Externe Dateien, wie die von Bootstrap, können links aussen über External Resources geladen werden.
JS-Code wird (ohne ) 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:
Vielen Dank an Spicelab für die detaillierte Antwort. Nun funktioniert es auch bei mir. Dennoch stehen ein paar Frage im Raum.
Warum muss der Java-Script am Ende des Bodys sein? Ich bin davon ausgegangen das ich die Zeile am Anfang in Headbereich packe, wie die CSS-Verlinkung, da der Browser ein Interpreter ist, damit er genau weiß wo er wann was suchen soll bzw. aufrufen soll.
Das Beispiel funktioniert jetzt nur, wenn sich das Modal letztendlich in derselben .html-Datei befindet. Wie am Anfang erwähnt habe ich momentan zwei Datei, die ich gerne Verknüpfen würde. Das gestaltet sich nicht so einfach, wenn ich das so richtig interpretiere, deshalb dachte ich an eine Zusammenlegung der Datei. Dabei habe ich die Bedenken das ich die Übersicht verliere. Nach der Zusammenlegung der Datei habe ich ca. 500 Zeilen, dass Modal hat an sich ca. 250 Zeilen. Mit einer Kommentierung würde man sich dann natürlich auch besser orientieren können, dennoch habe ich Bedenken.
[INDENT]
Wie seht ihr das? Ist das mit einer guten Kommentierung möglich oder lässt sich besser bearbeiten und warten, wenn ich sie doch getrennt lassen?[/INDENT]
Wo wir nun auch zu meiner dritten und letzten Frage kommen.
[INDENT]Wie detailliert kommentiert ihr eure Scripts? Schreibt ihr nur „Erstellung eines Buttons zum Öffnen des Modals XY“ oder „Erstellung eines Buttons zum Öffnen eines Modals XY mit der Hintergrund Farbe Blau und Schriftfarbe Weiß, Schriftart Ariel, Fett und Kursiv. Der Button soll sich in der horizontalen Mitte der Webseite befinden und einen Außenabstand zum obersten Objekt von 20% haben. Der Button soll nicht breiter als 20% der gesamten horizontalen Achse und nicht größer als 5% der gesamten vertikalen Achsen sein“.
Ich hoffe man sieht woraus ich hinaus möchte, ihr habt deutlich mehr Erfahrung und Wissen im Webdesign und deshalb ist mir eure Meinung wichtig.[/INDENT]
Ich wünsche euch noch einen schönen Sonntag
Gruß Christian.
Würde man zunächst annehmen, aber dem ist nicht so.
https://www.google.de/search?q=javascript+head+or+bottom
Performancegründe, u.a. können JS-Fehlermeldungen à la $ is undefined gegenüber dem Dokumentkopf ausgeschlossen werden, weil am Seitenfuß die Seite vollständig geladen, und somit das DOM bekannt ist.
Dazu haben wir dir schon die entscheidenen Tipps gegeben, wie dein Vorhaben mit der aktuellen Bootstrap-Version anstelle dem ehemaligen remote umzusetzen ist.
Dass es einfach wird, haben wir nicht behauptet. Ganz im Gegenteil: @Tronjer bringt die Anforderungen deutlich auf den Punkt.
Kommentare? Dazu in diesem Umfang, wie im zweiten Beispiel? Für mich? :D:cool:
Ein Konzept ist in mir zunächst gedanklich / technisch gewachsen, x-mal virtuell da oben durchgespielt worden. Da muß ich mir keine Beschreibung(en) im Taschenromanformat anheften, um mir Aussehen/Funktionen/Verhalten eines Element bildhaft vorstellen bzw. für die Zukunft merken zu können 
Also wirklich nur dort, wo’s mal richtig komplex wird, Stichwörter als Gedankenbrücke - um den Sachverhalt im Detail auch übernächstes Jahr, oder darauf, direkt auf den Schirm zu kriegen 
Grüßt euch,
ich bin soweit das das Modal fast funktioniert und bereit ist.
Warum nur fast?
Wenn ich auf den Button klicke um das Modal zu öffnen Pop es kurz auf und ist dann wieder verschwunden. Die HTML wird herein geladen, dass sieht man, dennoch ist das eingeben von Informationen in die Input-Felder nicht möglich, da dass Modal nicht mal eine Sekunde auf bleibt.
So wie ich euch kenne könnt ihr mir bestimmt auch hier weiterhelfen, dafür schon mal ein Dank.
Gruß Christian
Aber nur, wenn wir einen Link zum Demo haben.
Hier einmal der Code, wie ich das Modal eingefügt habe:
[HTML]
<!-- Modal -->
<div class="modal fade" id="meinModal" tabindex="-1" role="dialog" aria-labelledby="meinModalLabel" style="background-color: rgba(255, 255, 255, 0.9);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="meinModalLabel">Modal-Überschrift</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
<button type="button" class="btn btn-primary">Änderungen speichern</button>
</div>
</div>
</div>
</div>
</div>[/HTML]
In dieses Modal habe ich via „load“-Funktion meine HTML-Datei eingefügt:
<script>
$("#button").ready(function(){
$("#meinModal").load("Tabbartest.html");
});
</script>Wieso $(‚#button‘).ready() ?
Ich vermute mal, dass der Ajax-Request mit dem Bootstrap JS kollidiert.
Ouh danke Tronjer, war ein Anfängerfehler von mir…
hab die Zeilen jetzt in:
[CODE]
$(document).ready(function(){
$(„#button“).click(function(){
$(„#meinModal“).load(„Tabbartest.html“);
});
});
</script>[/CODE]
geändert, doch leider habe ich immer noch das selbe Problem.
Was meinst du damit „Ajax-Request kollidiert mit Bootstrap JS“? Wie muss ich mir das vorstellen und an welcher Stelle kollidieren die sich?
Du führst ein .load() auf die ID des Modals aus, welche qua Bootstrap bereits mit einer JS Funktion belegt ist.
Wie kann ich das beheben? Muss ich jetzt den ganzen Code von Tabbartest.html in die index.html kopieren oder lässt sich das auch auf anderen Wege beheben?
Du könntest den Ajax-Request auf ein Childelement des Modals ausführen. Außerdem lädt man kein keinen HTML-Code, sondern nur Daten im JSON-Format und rendert diese im Parent.
Ich kann eine Request-Funktion setzen und auslesen ob die Datei geladen ist oder nicht. Wie kann ich denn nun fortfahren damit es sich nicht direkt schließt?
Ich nehme mal an, dass dein $(„#meinModal“).load(„Tabbartest.html“) das Modal nicht schließt, sondern dessen HTML ersetzt. Genaueres zeigen dir die Dev-Tools deines Browsers.
Wenn du diese Struktur verwendest
http://getbootstrap.com/javascript/#modals
könntest du in
btw. der Request sollte an ein Event gebunden werden:
Pseudo-Code:
$('#meinModal').on('shown.bs.modal', function (e) {
$("#myDiv").load("Tabbartest.html");
})