Ein einfaches Bootstrap-Modal kann nicht zum Laufen gebracht werden

Lesezeit: 1 Minute

Ich versuche, ein einfaches Bootstrap-Modalbeispiel zum Laufen zu bringen, folge ich dieses Dokument was besagt “Sie können Modals auf Ihrer Seite einfach aktivieren, ohne eine einzige Zeile Javascript schreiben zu müssen. Geben Sie einem Element einfach ein Data-Controls-Modal-Attribut, das einer modalen Element-ID entspricht, …”, aber ich habe getan, was auch immer Ich konnte und hatte eine riesige Menge an Forschung immer noch nicht geschafft, dieses einfache Modal zum Laufen zu bringen.

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

Ich habe entweder das:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

oder dieses:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Button um das Modal zu aktivieren, habe ich auch die bootstrap-modal.js auf die Seite geladen. Wenn ich keine Javascript-Zeile hinzugefügt habe, um das Klickereignis “Launch Modal” zu verarbeiten, passiert überhaupt nichts, wenn ich auf “Launch Modal” klicke. Gibt es etwas, das ich übersehen habe?

  • Welche js-Skripte fügen Sie in Ihren Header ein und in welcher Reihenfolge?

    – Andrés Ilich

    12. Mai 2012 um 13:29 Uhr

  • Ich habe js-Skripte vor dem Body-Tag und nicht in der Kopfzeile eingefügt, in der folgenden Reihenfolge: ,, ist das in Ordnung? Danke.

    – cnherald

    13. Mai 2012 um 8:11 Uhr


  • Wenn ich das modale Beispiel auf der “mainpage.html” mit URL “/” ausprobiert habe, funktioniert es genau wie das Beispiel auf dem offiziellen Dokument und Ihrer Antwort. aber als ich das gleiche modale Beispiel auf eine HTML-Seite mit der URL “/nextpage” geladen habe, hat es überhaupt nicht funktioniert, es sei denn, ich habe eine Javascript-Zeile verwendet, um das Click-Ereignis zu verarbeiten. Irgendeine Idee?

    – cnherald

    13. Mai 2012 um 8:15 Uhr

habe ich endlich gefunden diese Lösung von “Sven” und löste das Problem. Was ich getan habe, war, dass ich “https://stackoverflow.com/questions/10560630/bootstrap.min.js” eingefügt habe mit:

<script src="https://stackoverflow.com/questions/10560630/bootstrap.min.js"/>

Anstatt von:

<script src="https://stackoverflow.com/questions/10560630/bootstrap.min.js"></script>

und es hat das Problem behoben, das wirklich seltsam aussah. kann jemand erklären warum?

  • So funktionieren (leider) Skript-Tags – sie können nicht selbstschließend sein. Es hat nichts mit Bootstrap zu tun.

    – Mikemaccana

    15. Juni 2012 um 12:55 Uhr

  • würdest du mehr erklären?

    – omid.n

    12. Februar 2014 um 15:46 Uhr

  • Sie können nicht verwenden /> am Ende des öffnenden script-Tags, um es in einem einzigen Tag zu schließen. es braucht separate öffnende und schließende Tags

    – Ben McIntyre

    7. April 2015 um 6:11 Uhr


Benutzer-Avatar
mg1075

Geige 1: eine Nachbildung des Modals, das auf der Twitter-Bootstrap-Site verwendet wird. (Dies ist das Modal, das standardmäßig nicht angezeigt wird, aber gestartet wird, wenn Sie auf die Demo-Schaltfläche klicken.)

http://jsfiddle.net/9RcDN/


Geige 2: eine Nachbildung des in der Bootstrap-Dokumentation beschriebenen Modals, das jedoch die notwendigen Elemente enthält, um die Verwendung von Javascript zu vermeiden. Beachten Sie insbesondere die Einbeziehung der hide Klasse an #myModal div, und die Verwendung von data-dismiss="modal" auf die Schaltfläche Schließen.

http://jsfiddle.net/aPDVM/4/

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

Es ist auch erwähnenswert, dass die Website, die Sie verwenden, auf Bootstrap 2.0 läuft, während die offizielle Twitter-Bootstrap-Site ist am 2.0.3.

  • Er verwendet die offiziellen Dokumente, nur die im Distributionspaket, nicht die kanonische Seite. Sehen Sie sich auch auf der kanonischen Website den nächsten Absatz an und Sie werden den Inhalt über Markup sehen, über den das OP spricht.

    – nrabinowitz

    12. Mai 2012 um 4:07 Uhr

  • @nrabinowitz – vielen Dank; Ich revidiere meine ursprüngliche Antwort.

    – mg1075

    12. Mai 2012 um 4:38 Uhr

  • danke nrabinowitz, wenn ich das modale Beispiel auf der “mainpage.html” mit URL “/” ausprobiert habe, funktioniert es genau wie das Beispiel auf dem offiziellen Dokument und Ihrer Antwort. aber wenn ich das gleiche modale Beispiel auf eine HTML-Seite mit der URL “/nextpage” geladen habe, funktioniert es überhaupt nicht, es sei denn, ich habe eine Javascript-Zeile verwendet, um das Click-Ereignis zu verarbeiten, irgendeine Idee?

    – cnherald

    12. Mai 2012 um 9:53 Uhr


  • Gibt es etwas mit dem Pfad der HTML (URL) zu tun? In meinem Fall befinden sich mainpage.html (URL ist “/”) und nextpage.html (URL ist “/nextpage”) im selben Ordner.

    – cnherald

    12. Mai 2012 um 10:00 Uhr


Benutzer-Avatar
Nick N.

Schauen Sie sich auch BootBox an, es ist wirklich einfach, Warnungen anzuzeigen und Boxen in einem Bootstrap-Modal zu bestätigen. http://bootboxjs.com/

So einfach ist die Umsetzung:

Normaler Alarm:

bootbox.alert("Hello world!");

Bestätigen:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
}); 

Aufforderung:

bootbox.prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

Und sogar benutzerdefinierte:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);

Ich hatte auch ein Problem mit Modals. Ich hätte deklarieren sollen jquery.min.js Vor bootstrap.min.js (in meiner Layout-Seite). Von der offiziellen Seite: „Alle Plugins hängen von jQuery ab (das bedeutet, dass jQuery enthalten sein muss Vor die Plugin-Dateien)”

Ich stoße auch auf dieses Problem. Ich habe bootstrap.js UND bootstrap-modal.js eingeschlossen. Wenn Sie bereits bootstrap.js haben, müssen Sie popover nicht einschließen.

  • Hallo tofs, danke für die Antwort, bitte beziehen Sie sich auf meine eigene Lösung.

    – cnherald

    17. Mai 2012 um 10:13 Uhr


Benutzer-Avatar
Agent47

Bei mir wurde das Bootstrap-Modal angezeigt und wieder ausgeblendet, wenn ich auf das Schaltflächen-Tag geklickt habe (im Markup wird das Modal nur mithilfe von Datenattributen angezeigt und ausgeblendet). In meiner gulpfile.js habe ich die Datei bootstrap.js (die die Modallogik hatte) und die Datei modal.js hinzugefügt. Ich denke also, nachdem der Browser beide Dateien analysiert und ausgeführt hat, werden zwei Click-Event-Handler an das jeweilige Dom-Element angehängt (einer für jede der Dateien), sodass einer das Modal anzeigt und das andere das Modal ausblendet. Hoffe, das hilft jemandem.

  • Hallo tofs, danke für die Antwort, bitte beziehen Sie sich auf meine eigene Lösung.

    – cnherald

    17. Mai 2012 um 10:13 Uhr


Benutzer-Avatar
simonmorley

Versuchen Sie, das p-Tag zu überspringen oder ersetzen Sie es durch ein h3-Tag oder ähnliches. Ersetzen:

<p>One fine body…</p>

mit

<h3>One fine body…</h3>

Es hat bei mir funktioniert, ich weiß nicht warum, aber es scheint, dass das p-Tag irgendwie nicht vollständig mit einigen Versionen von Bootstrap kompatibel ist.

  • Der HTML-Textinhalt im modalen Fenster wirkt sich nicht auf die Funktionsfähigkeit des Modals aus, es sei denn, es enthielt ungültiges Javascript.

    – brenjt

    16. Dezember 2012 um 21:48 Uhr

1187170cookie-checkEin einfaches Bootstrap-Modal kann nicht zum Laufen gebracht werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy