Ich arbeite mit Bootstrap an einer Website.
Grundsätzlich wollte ich ein Modal auf der Homepage verwenden, das über die Schaltfläche in der Heldeneinheit aufgerufen wird.
Schaltflächencode:
<button type="button"
class="btn btn-warning btn-large"
data-toggle="modal"
data-target="#myModal">Open Modal</button>
Modalcode:
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">In Costruzione</h3>
</div>
<div class="modal-body">
<p>Test Modal: Bootstrap</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
<button class="btn btn-warning">Salva</button>
</div>
</div>
Das Problem ist, dass sobald ich auf die Schaltfläche klicke, das Modal eingeblendet wird und sofort verschwindet.
Ich würde mich über jede Hilfe freuen.
Wie kann man auch die Farbe des Dropdown-Dreiecks ändern (nach oben zeigen, kein Schwebeflug)? Ich arbeite an einer Website, die auf Orange und Braun basiert, und das blaue Ding ist wirklich nervig.
twitter-bootstrap
modal-dialog
Gorokizu
quelle
quelle
Antworten:
Eine wahrscheinliche Ursache
Dies ist ein typisches Verhalten, wenn das JavaScript für das Modal-Plugin zweimal geladen wird. Bitte überprüfen Sie, ob das Plugin nicht doppelt geladen wird. Abhängig von der von Ihnen verwendeten Plattform kann der Modalcode aus einer Reihe von Quellen geladen werden. Einige der häufigsten sind:
require('bootstrap')
Debugging-Tipps
Ein guter Ausgangspunkt ist die Überprüfung der registrierten
click
Ereignis-Listener mithilfe der Entwicklertools in Ihrem Browser. Chrome listet beispielsweise die JS-Quelldatei auf, in der sich der Code zum Registrieren des Listeners befindet. Eine andere Möglichkeit besteht darin, die Quellen auf der Seite nach einer Phrase zu durchsuchen, die im Modal-Code enthalten ist, zvar Modal
.Leider finden diese nicht immer alle Dinge. Das Überprüfen der Netzwerkanforderungen kann etwas robuster sein, um Ihnen ein Bild von allem zu geben, was auf einer Seite geladen ist.
Eine (kaputte) Demo
Hier ist eine Demo von dem, was passiert , wenn Sie beide die Last bootstrap.js und Bootstrap-modal.js (nur um Ihre Erfahrung zu bestätigen):
Plunker
Wenn Sie auf dieser Seite zum Ende der Quelle scrollen, können Sie die
<script>
Zeile für die Datei bootstrap-modal.js entfernen oder auskommentieren und dann überprüfen, ob das Modal jetzt wie erwartet funktioniert.quelle
Ich hatte das gleiche Problem, aber es hatte eine andere Ursache. Ich folgte der Dokumentation und erstellte eine Schaltfläche wie folgt:
Als ich darauf klickte, schien nichts zu passieren. Die Schaltfläche befand sich jedoch in einer
<form>
, die vorübergehend nur dieselbe Seite abrief.Ich habe dies behoben, indem ich
type="button"
dem Schaltflächenelement hinzugefügt habe, damit das Formular beim Klicken nicht gesendet wird.quelle
Für mich funktionierte das Entfernen
von der Schaltfläche. Die Schaltfläche selbst kann ein beliebiges Element sein - ein Link, ein Div, eine Schaltfläche usw.
quelle
Ich habe eine Weile nach einer doppelten Bootstrap-Referenz in meiner MVC-App gesucht, nach den anderen hilfreichen Antworten auf diese Frage.
Endlich gefunden - es war in einer anderen Bibliothek enthalten, die ich benutzte, also überhaupt nicht offensichtlich! (
datatables.net
).Wenn dieses Problem weiterhin auftritt, suchen Sie nach anderen Bibliotheken, die möglicherweise Bootstrap für Sie enthalten. (
datatables.net
Ermöglicht das Festlegen eines Downloads mit oder ohne Bootstrap - andere tun dasselbe).Also entfernte ich das
bootstrap.min.js
von meinembundle.config
und alles funktionierte gut.quelle
Das gleiche Symptom im Kontext einer Rails-Anwendung mit Bootstrap, die vom
bootstrap-sass
Juwel bereitgestellt wird , und die Antwort von @ merv haben mich auf den richtigen Weg gebracht.Meine
application.js
Datei hatte Folgendes:Die Lösung bestand darin, eine der beiden Zeilen zu entfernen. In der Tat warnt Sie die Readme-Datei des Edelsteins vor diesem Fehler. Mein Fehler.
quelle
Mein Code hatte irgendwie die bootstrap.min.js zweimal enthalten. Ich habe einen von ihnen entfernt und jetzt funktioniert alles einwandfrei.
quelle
e.preventDefault();
mit jquery uiBei mir trat dieses Problem mit der Überschreibung der Klickmethode auf einer jquery-UI-Schaltfläche auf und verursachte standardmäßig ein erneutes Laden der Seite beim Klicken.
quelle
Das Problem kann auch auftreten, wenn Sie mit jquery einen Ereignis-Listener zweimal anhängen. Zum Beispiel würden Sie ohne Entbindung setzen:
In diesem Fall wird das Ereignis zweimal hintereinander ausgelöst und das Modal verschwindet.
Siehe Beispiel: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview
quelle
Ich bin auf dasselbe Symptom gestoßen, das @gpasse in seinem Beispiel gezeigt hat. Hier war mein Code ...
Wie @Bhargav vorschlug, war mein Problem auf die Schaltfläche zurückzuführen, mit der versucht wurde, das Formular zu senden und die Seite neu zu laden. Ich habe die Schaltfläche
<a>
wie folgt in einen Link geändert :... und es hat das Problem behoben.
HINWEIS: Ich habe noch nicht genug Ruf, um einfach einen Kommentar oder eine positive Bewertung hinzuzufügen, und ich hatte das Gefühl, dass ich eine kleine Klarstellung hinzufügen könnte.
quelle
Ich hatte auch das gleiche Problem, aber für mich geschah es, weil ich eine Schaltfläche mit dem Typ "Senden" in der modalen Form hatte. ich habe mich verändert
zu
Und das hat das Problem des Verschwindens behoben.
quelle
In meinem Fall hatte ich nur eine einzige Datei bootstrap.js, jquery.js enthalten, bekam aber immer noch einen solchen Fehler, und mein Code für die Schaltfläche war ungefähr so:
Ich habe einfach e.preventDefault () hinzugefügt ; dazu und es funktionierte wie Charme.
Mein neuer Code war also wie folgt:
quelle
Ich bin heute selbst auf dieses Problem gestoßen und es war zufällig nur in Chrome. Was mir klar machte, dass es sich möglicherweise um ein Rendering-Problem handelt. Das Verschieben des spezifischen Modals in eine eigene Rendering-Ebene löste das Problem.
quelle
In meinem Fall bewirkt ein Klick auf eine Schaltfläche ein (nicht gewünschtes) Neuladen der Seite.
Hier ist mein Fix:
quelle
In meinem Fall habe ich Gebrauch
actionlink
Schaltfläche " in MVC und bin mit diesem Problem konfrontiert. Ich habe viele der oben genannten und andere Lösungen ausprobiert, aber immer noch mit diesem Problem konfrontiert. Dann erkenne ich meinen Fehler im Code.Ich habe Modal in Javascript mit verwendet
Vor dem Fehler benutze ich diese Schaltfläche
Ich habe keinen Wert für die Eigenschaft href in dieser Schaltfläche, daher stehe ich vor dem Problem.
Dann bearbeite ich diesen Schaltflächencode so
Dann wird das Problem nur durch einen Fehler behoben, da im ersten kein # vorhanden ist.
Sehen Sie, ob dies für Sie hilfreich ist.
quelle
Noch eine Ursache / Lösung! Ich hatte in meinem JS-Code:
Aber mein HTML-Code wurde bereits geschrieben als:
Dies ist also eine weitere Permutation, wie die Duplizierung in den Code eingegeben und das Modal geöffnet und dann geschlossen wurde. In meinem Fall
data-target
unddata-toggle
in HTML gemäß Bootstrap-Dokumenten wird das Modal bereits zum Funktionieren gebracht. Der JS-Code ist daher redundant und funktioniert beim Entfernen.quelle
Ich hatte das gleiche Problem bei der Arbeit an einem Projekt mit asp.NET. Ich habe Bootstrap 3.1.0 verwendet und das Downgrade auf Bootstrap 2.3.2 gelöst.
quelle
Ich hatte auch das Problem, wenn der Knopf in einem ist tag dann erscheint das Modal einmal und verschwindet früh genug, wobei der Button aus dem Formular entfernt wird, das das Problem behoben hat. Danke, ich bin in diesem Thread gelandet! +1 an alle.
quelle
Beim Testen auf Mobilgeräten hatte ich das gleiche Problem, und dieser Trick hat bei mir funktioniert
Ändern Sie die Schaltfläche in ein Ankertag, das funktionieren soll. Das Problem tritt aufgrund der Typschaltfläche auf, die beim Senden versucht wird, sodass das Modal sofort verschwindet. Entfernen Sie auch das Verstecken aus dem Verblenden des Modalversteckens
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
.quelle
type="submit"
umtype="button"
dieses Problem löst.In meinem Fall hatte ich das CDN im Kopf von application.html.erb enthalten und auch das Juwel 'jquery-Rails' installiert, das ich aufgrund der obigen Dokumentation und Beiträge als überflüssig erachte.
Ich habe einfach das CDN (unten) vom Kopf von application.html.erb auskommentiert und das Modal bleibt entsprechend offen.
quelle
Ich hatte das gleiche Problem auch. Das Problem bei mir war, dass ich das Modal beim Drücken eines Links anzeigte und zur Bestätigung mit jquery aufforderte.
Der folgende Code zeigte das Modal an und das verschwand sofort:
Am Ende habe ich '#' zu href hinzugefügt, damit der Link nirgendwo hinkommt und mein Problem gelöst ist.
quelle
Haben Sie versucht, zu entfernen
quelle
Ich weiß, dass dies alt ist, aber hier ist noch etwas zu überprüfen - stellen Sie sicher, dass Sie nur ein Datenziel = Attribut haben. Ich hatte es dupliziert und das Ergebnis war wie in diesem Thread.
quelle
Ich hatte über
bootstrap
zu meinem Projekt hinzugefügtbower
, dann habe ich diebootstrap.min.js
Datei importiert und nach dermodal.js
Datei. (Die Schaltfläche zum Öffnen des Modals befindet sich in einem Formular.) Ich entferne einfach den Import fürmodal.js
und es funktioniert für mich.quelle
für den Fall, dass jemand Codeigniter 3 Bootstrap mit Datatable verwendet.
Unten ist mein Fix in config / ci_boostrap.php
quelle
Musste sich dem gleichen Problem stellen. Der Grund ist der gleiche wie der
@merv
. Das Problem bestand darin, dass der Seite eine Kalenderkomponente hinzugefügt wurde. Die Komponente selbst fügt die modale Funktion hinzu, die im Kalender-Popup verwendet werden soll.Die Gründe für das Unterbrechen des Modell-Popups sind einer oder mehrere der folgenden
quelle
Während ich mit Angular (5) arbeite, habe ich das gleiche Problem, aber in meinem Fall habe ich Folgendes gelöst:
component.html
component.ts
HINWEIS: Sie müssen jquery in ts-Datei als "deklarieren Sie var $: any;"
Änderungen, die ich vorgenommen habe:
"data-toggle =" modal "aus dem Button-Tag entfernt (dank @miCRoSCoPiC_eaRthLinG hilft mir diese Antwort hier), in meinem Fall wird es modal angezeigt, also habe ich erstellt (click) =" showresult () "
inside component.ts muss Jquery ($) deklarieren und die Inside-Button-Klickmethode showresult () ruft "$ ('# myModal'). modal ('show');"
quelle
Ich hatte das gleiche Problem, weil ich mein Modal zweimal umgeschaltet habe, wie unten gezeigt:
Ich habe ein Vorkommen von entfernt:
und es funktionierte wie Magie!
quelle