webentwicklung-frage-antwort-db.com.de

Kann nicht mit einem einfachen Bootstrap-Modal arbeiten

Ich versuche, ein einfaches Bootstrap-Modal-Sample zum Laufen zu bringen. Ich folge diesem Dokument das besagt "Sie können Modalitäten auf Ihrer Seite einfach aktivieren, ohne eine einzige Zeile Javascript schreiben zu müssen. Geben Sie einem Element einfach ein Datensteuerelement -Modal-Attribut, das einer Modal-Element-ID entspricht, ... ", aber ich habe getan, was ich konnte, und hatte eine riesige Menge an Recherchen, die dieses einfache Modal noch nicht zum Laufen bringen konnte.

<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 folgendes:

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

oder dieses: 

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

um den Modal-Button zu aktivieren, habe ich die bootstrap-modal.js auch auf der Seite geladen. Wenn ich keine JavaScript-Zeile für das Click-Ereignis "Launch Modal" hinzugefügt habe, passiert nichts, wenn ich auf "Launch Modal" klicke. Gibt es etwas, das ich übersehen habe?

27
cnherald

Ich habe schließlich diese Lösung von "Sven" gefunden und das Problem gelöst. Was ich getan habe, war "bootstrap.min.js" in:

<script src="bootstrap.min.js"/>

anstatt:

<script src="bootstrap.min.js"></script>

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

23
cnherald

Fiddle 1: Eine Replik des auf der Twitter-Bootstrap-Site verwendeten Modals. (Dies ist die Modalität, die standardmäßig nicht angezeigt wird. Sie wird jedoch gestartet, wenn Sie auf die Demo-Schaltfläche klicken.) 

http://jsfiddle.net/9RcDN/


Fiddle 2: Eine Replik des in der Bootstrap-Dokumentation beschriebenen Modals Dieses enthält jedoch die notwendigen Elemente, um die Verwendung von Javascript zu vermeiden. Beachten Sie insbesondere die Einbeziehung der hide-Klasse auf #myModal div und die Verwendung von data-dismiss="modal" auf der 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>​

Erwähnenswert ist auch, dass die von Ihnen verwendete Website auf bootstrap 2.0, Ausgeführt wird, während die offizielle Twitter-Bootstrap-Site auf 2.0.3 ist.

24
mg1075

Schauen Sie sich auch die BootBox an. Es ist wirklich einfach, Alarme anzuzeigen und die Kästchen in einem Bootstrap-Modal zu bestätigen. http://bootboxjs.com/

Die Implementierung ist so einfach:

Normaler Alarm:

bootbox.alert("Hello world!");

Bestätigen:

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

Promt:

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

Und sogar Brauch:

    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..."
}]);
17
Nick N.

Ich hatte auch ein Problem mit Modals. Ich hättejquery.min.jsvorbootstrap.min.js(in meiner Layoutseite) deklarieren sollen. Von der offiziellen Seite: "Alle Plugins hängen von jQuery ab (dies bedeutet, dass jQuery vor den Plugin-Dateien enthalten sein muss)".

10

Ich stoße auch auf dieses Thema. Ich habe bootstrap.js UND bootstrap-modal.js ... hinzugefügt. Wenn Sie bereits bootstrap.js haben, müssen Sie kein Popover hinzufügen.

5
Tulio F.

Für mich wurde das Bootstrap-Modal angezeigt und verschwand, als ich auf das Button-Tag klickte (im Markup wird das Modal nur mit Datenattributen angezeigt und ausgeblendet). In meiner gulpfile.js habe ich die bootstrap.js (die die modale Logik hatte) und die modal.js-Datei hinzugefügt. Ich denke, nachdem der Browser beide Dateien analysiert und ausgeführt hat, sind zwei Klickereignishandler an das jeweilige dom-Element angehängt (einer für jede der Dateien), also zeigt einer den Modal, der andere den Modal. Hoffe das hilft jemandem.

1
agent47

Ebenfalls,

Wenn Sie Ihre Seite in Visual Studio ausführen und das Bootstrap-Paket installiert haben, müssen Sie zwei Dinge prüfen

  1. Dass Sie auch das Paket "Bootsrap Modal Dialog" erhalten haben (sehr wichtig)
  2. Sie haben es zu bundle.config hinzugefügt, wenn Sie Bundling verwenden.
0
John Swaringen

Eine bessere Lösung ist das Laden einer verdrehten Version von bootstrap.js ohne Jquery. Holen Sie es von http://daniemon.com/blog/bootstrap-without-jquery/

<script src=".../bootstrap-without-jquery.min.js"></script>

Wenn Sie auf diese Weise gehen, sparen Sie sich Probleme mit Skript-Tags. 

0
Long

Ich hatte das gleiche Problem mit der Angular-CLI. Ich musste die bootstrap.js.min-Datei in die Datei .angular-cli.json importieren:

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
0
Flea

Überspringen Sie das p-Tag oder ersetzen Sie es durch ein h3-Tag oder ähnliches. Ersetzen:

<p>One fine body…</p>

mit

<h3>One fine body…</h3>

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

0
Daniel