Bootstrap Modal verschwindet sofort

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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>

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);
}

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>

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.

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.

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.

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.

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

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

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>

Haben Sie versucht, zu entfernen

data-dismiss="modal"

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.

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.

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'

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

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

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!