webentwicklung-frage-antwort-db.com.de

bootstrap modal verschwindet sofort nach dem show

Ich verwende das modale Plugin von Bootstrap in Rails

Die Website sagt, dass ich die Funktion erhalten kann, ohne Javascript zu schreiben.

Ich füge die folgende Zeile in meinemHTML(in slim) ein:

div#makeDream.modal.hide.fade 
    div.modal-header
        a.close data-dismiss='modal'
        h3 Hello World!            
    div.modal-body
    div.modal-footer

a data-toggle='modal' data-target='#makeDream' Button

Nach dem Klicken auf die Button. das modal erscheint, verschwindet aber sofort!

Ich habe die CSS von #makeDream gefunden

display:none

Ich weiß nicht wo es herkommt

Kann mir jemand sagen, wie ich es reparieren kann?

26
HanXu

Ich hatte dieses Problem und die Lösung war einfach ... Ich lud beide bootstrap.js AND bootstrap-modal.js .

bootstrap.js Includes bootstrap-modal.js

Lösung: Entfernen Sie bootstrap-modal.js aus Ihrer head und es wird korrekt funktionieren.

68
Adam

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.

4
user3941146

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

3
Nishant

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.

1
WasiF

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

1
saggy

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

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

0
Zero

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.

0
Lovemore Daka

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. 

0

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.

0
user3872496

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 

0
ProgrammerCk

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.

0
Adil Bashir

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

0
Simran Sawhney

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

0
JosephC