bootstrap modal verschwindet sofort nach dem show

In meinem Fall bestand das Problem des Anzeigens und des sofortigen Verschwindens des modalen Fensters darin, dass ich zweimal Toggle rief. Zuerst im Tag in der HTML-Datei und dann, wenn der Event-Handler in der JavaScript-Datei angehängt wird:

<a role="menuitem" tabindex="-1" href="#" data-toggle="modal" data-target="#myModal" id="deleteItemButton">Delete Item</a>

$ultodoListDisplay.on( "click", "#deleteItemButton",  function(){
    $('#myModal').modal('toggle');
});

Die Verweise auf das Bootstrap-CDN und die Stylesheets waren korrekt ..__ Definieren Sie daher das Umschalten des modalen Fensters nur einmal.

Wenn jemand Twitter Bootstrap Modal auf einer mobilen Website verwendet, besteht eine große Chance, dass Sie Jquerymobile verwenden. In diesem Fall werden Sie wahrscheinlich auf dieses spezielle Problem des Verschwindens von Bootstrap-Modal stoßen. Ich fand das Problem mit einer '.fadein'-Klasse von jquerymobile, die die' .fadein'-Klasse von bootstrap überschritt, wodurch das modale Fenster ausgeblendet wurde.

Sie können das Problem auf Ihre eigene Weise beheben. Mein Ansatz, da ich das Einblenden von Jquery Mobile nicht wirklich benutzte, kommentierte ich es und Voila! Der modale Dialog war zurück. Hoffe das hilft jemandem. :)

Ich hatte dieses Problem, weil ich zwei Verweise auf "bootstrap.min.js", einen CDN-Link und eine andere lokale Datei hatte. Wenn Sie einen Kommentar zu einem von ihnen machten, wurden einige Dropdown-Menüs nicht mehr reagiert

dann habe ich gerade das "jQuery Validate Unauffällig für Bootstrap 3" aktualisiert, das Problem wurde behoben.

sie sollten bootstrap-model.js am unteren Rand der Webseite hinzufügen, a hatte auch ein Problem, ich versuchte es mit einem anderen Plugin, wir können auch ein anderes Plugin verwenden, aber bevor Sie es verwenden, denken Sie an bootstrap-model.js ... ..

Versuchen Sie, die "Hide" -Klasse in dieser Zeile zu entfernen:

div#makeDream.modal.hide.fade

Um dies zu lesen:

div#makeDream.modal.fade

Beachten Sie auch, dass abhängig von der verwendeten Bootstrap-Version die Schaltfläche zum Öffnen des Modals möglicherweise als geschrieben werden muss (übersetzen in html slim):

<a class="btn" data-toggle="modal" data-backdrop="true" data-keyboard="true" href="#makeDream">Open Modal</a>

Ich hatte dasselbe Problem, ich hatte sowohl bootstrap.js als auch bootstrap.min.js dabei, dann entfernte ich eines von ihnen und löste das Problem

In meinem Fall hatte ich eine Schaltfläche, die die modale ...

<asp:Button ID="btnSearch" runat="server" Width="100%" Text="Select
Action" class="btn btn-info btn-sm" data-backdrop="static"
data-toggle="modal" data-target="#myModalID"></asp:Button>

Ich habe die Schaltfläche in ein Ankertag geändert und es funktioniert gut 

<a href="#" ID="btnShowModal" class="btn btn-info btn-sm"
data-backdrop="static" data-toggle="modal" style="width:100%;"
data-target="#myModalID">Select Action</a>

Nachdem ich überprüft hatte, dass ich keine doppelten Bootstrap-Javascript-Dateien laden wollte. Bootstrap.min.js oder boostrap.js. Nur eins ist genug.

In meinem Fall habe ich das WordPress-Plugin "wp-jubhunt" und "_tk" verwendet und beide wurden bootstrap.js geladen. Das Deaktivieren von bootstrap.js im Plugin funktionierte für mich. 

In meinem Fall funktionierten Modals gut mit Attributen, aber als .modal ('show') von js aufgerufen wurde, versteckte es sich sofort. Das Problem wurde behoben, als ich bootstrap.js in die Fußzeile eingefügt habe, aber ich weiß nicht, warum es nach allen CSS- und Jquery-Deklarationen im Header nicht funktioniert.

bootstrap.min.js verursacht dieses Problem, indem es entfernt wird, löst es das Problem

jQuery(document).on('click','#SendMail',function(){ 
 jQuery("#fixerrormodal").modal('toggle');   
});

das wird helfen 

Die anderen Lösungen hier haben mir nicht geholfen. Ich habe festgestellt, dass ich Modal in einer Klingenform verwendet habe, die sich in Laravel befindet. Aus diesem Grund sendet die Formaktion eine Anfrage für die Schleife und mein Modell verschwindet. Ich schneide einfach den Button außerhalb des Formulars div und alles funktioniert gut.

Sie können einfach die Attribute data-toggle="modal" und data-target="#myModalID" von der Schaltfläche oder dem Ankertag entfernen. Dadurch wird das Modal umgeschaltet und Sie haben bootstrap.min.js zweimal oder mehr importiert, wodurch es umgeschaltet wird!

Schreiben Sie stattdessen einen onClick - Ereignislistener für die Schaltfläche, und lösen Sie manuell das Modal aus: $('#myModal').modal();

Ich hatte das gleiche Problem, beim Laden der Seite, basierend auf der Sitzungsvariablen, zeigte ich das Modal an und verschwand, als ich $ ('# myModal') die Jquery-Trigger-Methode unter dem von mir verwendeten Login-Link

$(window).load(function(){ $('#loginlink').trigger('click'); });