Bootstrap Modal verschwindet sofort

203

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.

Gorokizu
quelle
1
Sie können zu twitter.github.com/bootstrap gehen und den Beispielen folgen.
Maurício Giordano
2
Ich habe es mit onClick = "$ ('# myModal'). Modal ()" im Button-Tag zum Laufen gebracht.
Gorokizu
hat Ihren Ansatz verwendet: onClick = "$ ('# myModal'). modal ()"
nikolai.serdiuk

Antworten:

467

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:

  • bootstrap.js (die vollständige BootStrap JS-Suite)
  • bootstrap.min.js (wie oben, nur minimiert)
  • bootstrap-modal.js (das eigenständige Plugin)
  • ein Abhängigkeitslader, z. require('bootstrap')

Debugging-Tipps

Ein guter Ausgangspunkt ist die Überprüfung der registrierten clickEreignis-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, z var 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.

merv
quelle
4
Dies funktionierte für mich, ich löschte bootstrap.js und ließ bootstrap.min.js in. +1
Daniel Sun Yang
1
Was mir passiert ist, ist, dass ich bootstrap.js auf <head> </ head> und unter <footer> </
footer
@PrinceTyke Sie hatten Recht, die URL für bootstrap-modal.js war veraltet und daher wurde nur eine geladen (damit es funktioniert). Ich habe es repariert, damit es wieder kaputt geht.
Merv
Dies passiert auch, wenn Sie zwei "bootstrap.js" gleichzeitig auf derselben Seite platzieren
Leandro RR
1
Für mich war dies jedoch das Problem, da ich dies in Verbindung mit dem ASP.NET-Bundleing verwendet habe, mit dem Sie eine CDN-Adresse für bereitgestellte Server angeben können. Dies bedeutet, dass mein Bereitstellungsserver dieses Problem hatte, mein Entwickler jedoch in Ordnung war. Stellen Sie also sicher, dass Sie das Bootstrapping aus dem CDN entfernt haben, das sie auf ihrer Website anbieten, um dies zu vermeiden.
Worthy7
85

Ich hatte das gleiche Problem, aber es hatte eine andere Ursache. Ich folgte der Dokumentation und erstellte eine Schaltfläche wie folgt:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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.

Rory Hunter
quelle
Ich hatte zwei Bibliotheken bootstrap.js und bootstrap-editable.js. Ich dachte, sie wären dieselbe Bibliothek, also habe ich die erste gelöscht und jetzt funktioniert alles.
Fedeco
25

Für mich funktionierte das Entfernen

data-toggle="modal"

von der Schaltfläche. Die Schaltfläche selbst kann ein beliebiges Element sein - ein Link, ein Div, eine Schaltfläche usw.

miCRoSCoPiC_eaRthLinG
quelle
1
Dies ist derjenige, der für mich gearbeitet hat. Ich bin mir nicht ganz sicher warum, da der Rest der Modalitäten auf meiner Seite damit gut zu funktionieren scheint, aber einer hat es nicht getan! Seltsam. Trotzdem danke!
Blueprintchris
15

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.netErmöglicht das Festlegen eines Downloads mit oder ohne Bootstrap - andere tun dasselbe).

Also entfernte ich das bootstrap.min.jsvon meinem bundle.configund alles funktionierte gut.

John Lucas
quelle
Genial, dieser hat mein Problem mit Modals gelöst. Ich stimme zu, dass es überhaupt nicht offensichtlich war. Danke
Haris
13

Das gleiche Symptom im Kontext einer Rails-Anwendung mit Bootstrap, die vom bootstrap-sassJuwel bereitgestellt wird , und die Antwort von @ merv haben mich auf den richtigen Weg gebracht.

Meine application.jsDatei hatte Folgendes:

//= require bootstrap
//= require bootstrap-sprockets

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.

Giuseppe
quelle
9

Mein Code hatte irgendwie die bootstrap.min.js zweimal enthalten. Ich habe einen von ihnen entfernt und jetzt funktioniert alles einwandfrei.

Ricardo Pieper
quelle
In meinem Fall habe ich bootstrap.js und bootstrap.min.js hinzugefügt
ImranNaqvi
Diese Antwort half mir, jemand hatte die Bootstrap-JS von einer CDN aufgenommen, obwohl sie bereits mit npm installiert war
BritishSam
8

e.preventDefault(); mit jquery ui

Bei 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.

LX-3
quelle
8

Das Problem kann auch auftreten, wenn Sie mit jquery einen Ereignis-Listener zweimal anhängen. Zum Beispiel würden Sie ohne Entbindung setzen:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

In diesem Fall wird das Ereignis zweimal hintereinander ausgelöst und das Modal verschwindet.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Siehe Beispiel: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

gpasse
quelle
3
@karadayi es ist kein 'Fix', nur ein Fall, in dem ein solches Problem auftreten kann.
Gpasse
7

Ich bin auf dasselbe Symptom gestoßen, das @gpasse in seinem Beispiel gezeigt hat. Hier war mein Code ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

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 :

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... 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.

JDev
quelle
4

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

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

zu

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

Und das hat das Problem des Verschwindens behoben.

Doug
quelle
3

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:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Ich habe einfach e.preventDefault () hinzugefügt ; dazu und es funktionierte wie Charme.

Mein neuer Code war also wie folgt:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>
Mekey Salaria
quelle
1
Ja, das hat mich nur gebissen. Vielen Dank.
Jeremy Harris
3

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.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}
gmaliar
quelle
3

In meinem Fall bewirkt ein Klick auf eine Schaltfläche ein (nicht gewünschtes) Neuladen der Seite.

Hier ist mein Fix:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>
akop
quelle
Dies ist der beste Pfad, wenn Sie mehrere JS-Bibliotheken laden.
Daniel Vukasovich
2

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

 $('#ModalId').modal('show');

Vor dem Fehler benutze ich diese Schaltfläche

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

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

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

Dann wird das Problem nur durch einen Fehler behoben, da im ersten kein # vorhanden ist.

Sehen Sie, ob dies für Sie hilfreich ist.

Saurabh Solanki
quelle
2

Noch eine Ursache / Lösung! Ich hatte in meinem JS-Code:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Aber mein HTML-Code wurde bereits geschrieben als:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

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-targetund data-togglein HTML gemäß Bootstrap-Dokumenten wird das Modal bereits zum Funktionieren gebracht. Der JS-Code ist daher redundant und funktioniert beim Entfernen.

James
quelle
1

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.

Vor
quelle
1

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.

Satheeshwaran
quelle
1

Beim Testen auf Mobilgeräten hatte ich das gleiche Problem, und dieser Trick hat bei mir funktioniert

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Ä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"> .

Bhargav
quelle
Wie pro @RoryHunter Vorschlag oben, dann ist die Taste einfach zu verändern , type="submit"um type="button"dieses Problem löst.
Richard Hauer
1

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.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
brntsllvn
quelle
1

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:

<a href="" onclick="do_some_stuff()">Hey</a>

Am Ende habe ich '#' zu href hinzugefügt, damit der Link nirgendwo hinkommt und mein Problem gelöst ist.

<a href="#" onclick="do_some_stuff()">Hey</a>
Eutychus
quelle
1

Haben Sie versucht, zu entfernen

data-dismiss="modal"
JeffNhan
quelle
0

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.

Pete
quelle
0

Ich hatte über bootstrapzu meinem Projekt hinzugefügt bower, dann habe ich die bootstrap.min.jsDatei importiert und nach der modal.jsDatei. (Die Schaltfläche zum Öffnen des Modals befindet sich in einem Formular.) Ich entferne einfach den Import für modal.jsund es funktioniert für mich.

Pableiros
quelle
0

für den Fall, dass jemand Codeigniter 3 Bootstrap mit Datatable verwendet.

Unten ist mein Fix in config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'
bravo net
quelle
0

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

  • Laden von mehr als einem Bootstrap js Versionen / Dateien (minimiert ...)
  • Hinzufügen eines externen Kalenders zu der Seite, auf der Bootstrap verwendet wird
  • Hinzufügen einer benutzerdefinierten Warnmeldung oder Popup-Bibliothek zur Seite
  • Jede andere Bibliothek, die Popup-Verhalten hinzufügt
Shantha Kumara
quelle
0

Während ich mit Angular (5) arbeite, habe ich das gleiche Problem, aber in meinem Fall habe ich Folgendes gelöst:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

HINWEIS: Sie müssen jquery in ts-Datei als "deklarieren Sie var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Ä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');"

Bhagvat Lande
quelle
0

Ich hatte das gleiche Problem, weil ich mein Modal zweimal umgeschaltet habe, wie unten gezeigt:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Ich habe ein Vorkommen von entfernt:

$ ('# myErrorModal'). modal ('umschalten')

und es funktionierte wie Magie!

Pholoso Mams
quelle