Ich habe die Beiträge hier gelesen, die Bootstrap-Site und wie verrückt gegoogelt - kann aber nicht finden, was ich sicher bin, ist eine einfache Antwort ...
Ich habe ein Bootstrap-Modal, das ich von einem link_to-Helfer wie folgt öffne:
<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal", class: "btn btn-primary"} %>
In meiner ContactsController.create
Aktion habe ich Code, der erstellt und Contact
dann an weitergegeben wird create.js.erb
. In habe create.js.erb
ich einen Fehlerbehandlungscode (eine Mischung aus Ruby und Javascript). Wenn alles gut geht, möchte ich das Modal schließen.
Hier habe ich Probleme. Ich kann das Modal nicht ablehnen, wenn alles gut geht.
Ich habe es versucht $('#myModal').modal('hide');
und das hat keine Wirkung. Ich habe auch versucht, $('#myModal').hide();
was dazu führt, dass das Modal entlassen wird, aber den Hintergrund verlässt.
Irgendwelche Anleitungen, wie man das Modal schließt und / oder den Hintergrund von innen entfernt create.js.erb
?
Bearbeiten
Hier ist das Markup für myModal:
<div class="modal hide" id="myModal" >
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add Contact</h3>
<div id="errors_notification">
</div>
</div>
<div class="modal-body">
<%= form_for :contact, url: contacts_path, remote: true do |f| %>
<%= f.text_field :first_name, placeholder: "first name" %>
<%= f.text_field :last_name, placeholder: "last name" %>
<br>
<%= f.submit "Save", name: 'save', class: "btn btn-primary" %>
<a class="close btn" data-dismiss="modal">Cancel</a>
<% end %>
</div>
<div class="modal-footer">
</div>
</div>
quelle
$('#myModal').modal('hide');
ist die richtige Syntax zum Schließen / Ausblenden des Modals mit der IDmyModal
(Sie können dies auf der Bootstrap-Dokumentationsseite testen ). Sind Sie sicher, dass Sie ein Element mit dieser ID auf Ihrer Seite haben? Was möchten Sie mit diesem Aufruf erreichen? Ihre aktuelle Implementierung führt eine Ajax-Anfrage annew_contact_path
und öffnet gleichzeitig das Modal mit dem Inhalt von#myModal
- ist dies das, was Sie wollen?myModal
. Ich habe es erneut versucht$('myModal').modal('hide')
und immer noch nicht gut. HM. In Bezug auf das, was ich erreichen möchte, denke ich, dass es möglicherweise falsch war, den link_to-Helfer zu verwenden. Ich habe dies ersetzt durch:<a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>
da ich keinen Anruf brauchenew_contact_path
. Ich möchte nur, dass das Modal geöffnet wird und sich dann mit Benutzereingaben befasst. Vielen Dank, dass Sie sich die Zeit genommen haben, um zu antworten. Ich werde sehen, ob ich das nicht klären kann.$('#myModal').modal('hide');
(#
in Ihrem Kommentar fehlt ein Fehler).$('#myModal').modal('hide')
. JAntworten:
Verwenden Sie bei geöffnetem Modal im Browserfenster die Konsole des Browsers, um dies zu versuchen
Wenn es funktioniert (und das Modal geschlossen wird), wissen Sie, dass Ihr geschlossenes Javascript nicht korrekt vom Server an den Browser gesendet wird.
Wenn es nicht funktioniert, müssen Sie auf dem Client weiter untersuchen, was passiert. Stellen Sie beispielsweise sicher, dass nicht zwei Elemente mit derselben ID vorhanden sind. Funktioniert es beispielsweise beim ersten Mal nach dem Laden der Seite, aber nicht beim zweiten Mal?
Browserkonsole: Firebug für Firefox, Debugging-Konsole für Chrome oder Safari usw.
quelle
Um das Bootstrap- Modal zu schließen , können Sie 'hide' als Option an die Modal-Methode wie folgt übergeben
Bitte werfen Sie hier einen Blick auf die funktionierende Geige
Bootstrap bietet auch Ereignisse, die Sie in die modale Funktionalität einbinden können. Wenn Sie beispielsweise ein Ereignis auslösen möchten, wenn das Modal für den Benutzer nicht mehr sichtbar ist , können Sie das Ereignis hidden.bs.modal verwenden. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in Dokumentation
Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schaltfläche zum Schließen eine ID und lösen Sie einen Klick auf die Schaltfläche zum Schließen aus.
quelle
Ich benutze Bootstrap 3.4 Für mich funktioniert das nicht
$('#myModal').modal('hide')
In meiner Verzweiflung tat ich Folgendes:
Vielleicht ist es nicht elegant, aber es funktioniert
quelle
Die beste Form, um ein Modal mit Bootstrap zu verstecken und anzuzeigen
quelle
Ich hatte denselben Fehler und diese Codezeile hilft mir wirklich.
quelle
quelle
Ich habe die richtige Lösung gefunden, mit der Sie diesen Code verwenden können
quelle
Ich bin auf ein ähnliches Problem gestoßen. Das
$('#myModal').modal('hide');
läuft wahrscheinlich durch diese Funktion und trifft die LinieDas Problem ist, dass der Wert isShown möglicherweise undefiniert ist, selbst wenn das Modal angezeigt wird und der Wert true sein sollte. Ich habe den Bootstrap-Code leicht wie folgt geändert
Dies schien das Problem größtenteils zu lösen. Wenn der Hintergrund weiterhin besteht, können Sie jederzeit einen Anruf hinzufügen, um ihn nach dem Ausblenden des Anrufs manuell zu entfernen
$('.modal-backdrop').remove();
. Überhaupt nicht ideal, funktioniert aber.quelle
(Siehe Bootstrap 3), So verbergen Sie die modale Verwendung :
$('#modal').modal('hide')
. Aber der Grund, warum die Kulisse (für mich) herumhing, war, dass ich das DOM für das Modal zerstörte, bevor 'Verstecken' beendet war.Um dies zu beheben, habe ich das versteckte Ereignis mit dem Entfernen des DOM verkettet. In meinem Fall:
this.render()
quelle
this.render()
wie esundefined is not a function
in meiner Chromkonsole angezeigt wird?Ich hatte besseres Glück, den Anruf zu tätigen, nachdem der "angezeigte" Rückruf stattgefunden hat:
Dadurch wurde sichergestellt, dass das Modal geladen wurde, bevor der Aufruf von hide () ausgeführt wurde.
quelle
Wir stellten fest, dass zwischen dem Aufruf unseres Servercodes und der Rückkehr zum erfolgreichen Rückruf nur eine geringfügige Verzögerung bestand. Wenn wir den Aufruf des Servers in den
$("#myModal").on('hidden.bs.modal', function (e)
Handler einschließen und dann die$("#myModal").modal("hide");
Methode aufrufen würden, würde der Browser das Modal ausblenden und dann den serverseitigen Code aufrufen.Wieder nicht elegant, aber funktional.
Wie Sie sehen können, wird beim
myFunc
Aufrufen das Modal ausgeblendet und anschließend der serverseitige Code aufgerufen.quelle
Ich hatte das gleiche Problem und nach einigem Experimentieren fand ich eine Lösung. In meinem Klick-Handler musste ich verhindern, dass das Ereignis in die Luft sprudelt:
quelle
Hier ist das Dokument: http://getbootstrap.com/javascript/#modals-methods
Hier ist die Methode: $ ('# myModal'). Modal ('hide')
Wenn Sie das Modal mehrmals mit unterschiedlichem Inhalt öffnen müssen, schlage ich vor, Folgendes hinzuzufügen (in Ihrem Haupt-js):
So bereinigen Sie den Inhalt für die nächste Öffnung und vermeiden eine Art Caching
quelle
quelle
Sogar ich habe die gleichen Probleme. Das hat mir sehr geholfen
quelle
Ich habe diesen einfachen Code verwendet:
quelle
$('#modal').modal('hide');
und seine Varianten funktionierten nicht für mich, es sei denn, ich hattedata-dismiss="modal"
als Attribut auf der Schaltfläche Abbrechen. Wie Sie bestand meine Notwendigkeit darin, möglicherweise aufgrund einer zusätzlichen Logik zu schließen / möglicherweise nicht zu schließen, sodass ein Klicken auf einen Link mitdata-dismiss="modal"
direktem Zugriff nicht ausreicht. Am Ende hatte ich eine versteckte Schaltfläche, mitdata-dismiss="modal"
der ich den Klick-Handler programmgesteuert aufrufen konnteund dann in den Klick-Handlern zum Abbrechen, wenn Sie das Modal schließen müssen, das Sie haben können
quelle
Wir müssen uns um das Sprudeln der Ereignisse kümmern. Sie müssen eine Codezeile hinzufügen
quelle
Mir ist klar, dass dies eine alte Frage ist, aber ich habe festgestellt, dass keine davon wirklich genau das war, wonach ich gesucht habe. Dies scheint darauf zurückzuführen zu sein, dass versucht wird, das Modal zu schließen, bevor es angezeigt wird.
Meine Lösung basierte auf der Antwort von @ schoonie23, aber ich musste einige Dinge ändern.
Zuerst habe ich oben in meinem Skript eine globale Variable deklariert:
Dann in meinem Modalcode:
Dann dies: (Beachten Sie den Namen 'gezeigt.bs.modal', der angibt, dass das Modal vollständig angezeigt wurde, im Gegensatz zu 'show', das beim Aufruf des Show-Ereignisses ausgelöst wird. (Ich habe ursprünglich nur 'gezeigt' versucht, aber es hat nicht funktioniert. )
Hoffe, das erspart jemandem eines Tages die zusätzliche Forschung. Ich habe ein bisschen nach einer Lösung gesucht, bevor ich darauf gekommen bin.
quelle
Ich habe diesen Code verwendet -
Mit Fade Out Modal mit glattem Effekt ausblenden.
quelle
Wenn Sie die close-Klasse in Ihren Modalen verwenden, funktioniert Folgendes. Abhängig von Ihrem Anwendungsfall empfehle ich im Allgemeinen, nur nach dem sichtbaren Modal zu filtern, wenn es mehr als ein Modal mit der Klasse close gibt.
quelle
document.getElementById ('closeButton'). click (); // füge einem Element im Modal ein data-Entlassung = "modal" -Attribut hinzu und gib ihm diese ID
quelle
Dies ist die schlechte Praxis, aber Sie können diese Technik verwenden, um Modal zu schließen, indem Sie die Schaltfläche zum Schließen in Javascript aufrufen. Dies schließt modal nach 3 Sekunden.
quelle
Dies kann nur in HTML erfolgen:
quelle