Wie verstecke ich Bootstrap Modal mit Javascript?

281

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.createAktion habe ich Code, der erstellt und Contactdann an weitergegeben wird create.js.erb. In habe create.js.erbich 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>
jvillian
quelle
1
$('#myModal').modal('hide');ist die richtige Syntax zum Schließen / Ausblenden des Modals mit der ID myModal(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 an new_contact_pathund öffnet gleichzeitig das Modal mit dem Inhalt von #myModal- ist dies das, was Sie wollen?
Julian D.
Hallo Julian. Ich habe oben meinModal-Markup gepostet und es gibt tatsächlich ein Div mit ID 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 brauche new_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.
Jvillian
Ich denke, es ist nur ein Tippfehler, aber der Anruf sollte sein $('#myModal').modal('hide');( #in Ihrem Kommentar fehlt ein Fehler).
Julian D.
1
Mein schlechtes für das Tippen anstatt vom eigentlichen Code zu kopieren. Der eigentliche Code lautet : $('#myModal').modal('hide'). J
Jvillian
Sie können versuchen, bootboxjs
md zu verwenden. ariful ahsan

Antworten:

493

Verwenden Sie bei geöffnetem Modal im Browserfenster die Konsole des Browsers, um dies zu versuchen

$('#myModal').modal('hide');

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.

Larry K.
quelle
Der zweite Absatz war das, wonach ich gesucht habe. Doppelte IDs führten dazu, dass meine Modalitäten beim zweiten Mal nicht richtig angezeigt wurden.
Matias
Dies hat das Problem für mich behoben. Vielen Dank.
Finchy70
77

Um das Bootstrap- Modal zu schließen , können Sie 'hide' als Option an die Modal-Methode wie folgt übergeben

$('#modal').modal('hide');

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.

Subodh Ghulaxe
quelle
1
Dies ist besonders nützlich, wenn Sie genau wissen, an welchem ​​Punkt der modale Dialog geschlossen werden soll. Zum Beispiel am Ende einer Erfolgsfunktion. Auf diese Weise kann der Dialog im Fehlerfall angezeigt werden.
Wird
47

Ich benutze Bootstrap 3.4 Für mich funktioniert das nicht

$('#myModal').modal('hide')

In meiner Verzweiflung tat ich Folgendes:

$('#myModal').hide();
$('.modal-backdrop').hide();

Vielleicht ist es nicht elegant, aber es funktioniert

Gaza
quelle
2
Es wäre besser, wenn Sie $ (". Modal-backdrop") verwenden. Remove ();
Bloodhound
1
Dies wird neue Fehler einführen. Bitte verwenden Sie empfohlene Methoden,
Benjamin Eckstein
jQuery ('. modal-backdrop'). click ();
kleiner Buggy funktioniert aber sicher. Die unten stehende Lösung von Manuel Fernando hat für mich perfekt funktioniert.
Munam Yousuf
@Umingo empfehlen Sie bitte eine Methode, wenn die hier genannten nicht gut sind und Sie eine kennen.
Spanne
47

Die beste Form, um ein Modal mit Bootstrap zu verstecken und anzuzeigen

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
Royer Vazquez
quelle
Beste Antwort bei weitem. Das Simulieren des Verhaltens mit Klicks, jQuery fadeOut oder css kann auf lange Sicht zu Fehlausrichtungen führen.
Giorgio Tempesta
43

Ich hatte denselben Fehler und diese Codezeile hilft mir wirklich.

$("[data-dismiss=modal]").trigger({ type: "click" });
Manuel Fernando
quelle
1
Ich habe ein anderes Problem gelesen, das darauf hinwies, dass das Problem darin bestehen könnte, dass das Attribut "Daten entlassen" für das Element
Femtosekunde,
Viele Viele Viele danke Manuel, dies hat nach langem Suchen mein Problem gelöst, $ ('# MyModelId'). Modal ('hide'); $ ("[data-entlassen = modal]"). trigger ({type: "click"}); dass ich das Modal für Ajax-Erfolg schließen wollte ... wirklich vielen Dank, mein Lieber
Abdelrhman Raafat
22
$('#modal').modal('hide'); 
//hide the modal

$('body').removeClass('modal-open'); 
//modal-open class is added on body so it has to be removed

$('.modal-backdrop').remove();
//need to remove div with modal-backdrop class
Shivam
quelle
es hat funktioniert, aber modal ist
kaputt gegangen,
21

Ich habe die richtige Lösung gefunden, mit der Sie diesen Code verwenden können

$('.close').click(); 
Osama Khodrog
quelle
beste Lösung bisher
Kosas
Hervorragend ist einfach das Beste +1
MooMoo
11

Ich bin auf ein ähnliches Problem gestoßen. Das $('#myModal').modal('hide');läuft wahrscheinlich durch diese Funktion und trifft die Linie

if (!this.isShown || e.isDefaultPrevented()) return

Das 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

if (!(typeof this.isShown == 'undefined') && (!this.isShown || e.isDefaultPrevented())) return

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.

Richard Handley
quelle
11

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

var $modal = $('#modal');

//when hidden
$modal.on('hidden.bs.modal', function(e) { 
  return this.render(); //DOM destroyer
});

$modal.modal('hide'); //start hiding
Nathan
quelle
1
Aber können Sie mir bitte erzählen, this.render()wie es undefined is not a functionin meiner Chromkonsole angezeigt wird?
Anil Kumar Pandey
9

Ich hatte besseres Glück, den Anruf zu tätigen, nachdem der "angezeigte" Rückruf stattgefunden hat:

$('#myModal').on('shown', function () {
      $('#myModal').modal('hide');
})

Dadurch wurde sichergestellt, dass das Modal geladen wurde, bevor der Aufruf von hide () ausgeführt wurde.

schoonie23
quelle
8

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.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Wie Sie sehen können, wird beim myFuncAufrufen das Modal ausgeblendet und anschließend der serverseitige Code aufgerufen.

markdotnet
quelle
6

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:

$("a.close").on("click", function(e){
  $("#modal").modal("hide");
  e.stopPropagation();
});
brentmc79
quelle
6

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

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

So bereinigen Sie den Inhalt für die nächste Öffnung und vermeiden eine Art Caching

Christophe Meheut Forik 21
quelle
6
$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 
Grenzenlose isa
quelle
5

Sogar ich habe die gleichen Probleme. Das hat mir sehr geholfen

$("[data-dismiss=modal]").trigger({ type: "click" });
Jaggi
quelle
5

Ich habe diesen einfachen Code verwendet:

$("#MyModal .close").click();
Viktor Kisil'ov
quelle
4

$('#modal').modal('hide');und seine Varianten funktionierten nicht für mich, es sei denn, ich hatte data-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 mit data-dismiss="modal"direktem Zugriff nicht ausreicht. Am Ende hatte ich eine versteckte Schaltfläche, mit data-dismiss="modal"der ich den Klick-Handler programmgesteuert aufrufen konnte

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

und dann in den Klick-Handlern zum Abbrechen, wenn Sie das Modal schließen müssen, das Sie haben können

$('#hidden-cancel').click();
Tyler
quelle
In meinem Fall (asp net razor page) hatte ich es ähnlich wie das OP: Ich hatte ein etwas leeres div mit der Klasse "modal" und fügte dynamisch eine cshtml-Datei hinzu, z. B. den modalen Körper, und fügte einen Klick auf eine Schaltfläche hinzu Körper, sobald das Modal gezeigt würde. ".modal ('hide)" allein aufzurufen war nicht ausreichend, wie Sie betonten: "data-entlassen =" modal "" auf der aufrufenden Schaltfläche war der Deal !!! ty
Csharpest
3

Wir müssen uns um das Sprudeln der Ereignisse kümmern. Sie müssen eine Codezeile hinzufügen

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
Prathap Kudupu
quelle
3

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:

<script>
    var closeModal = false;
    ...Other Code...

Dann in meinem Modalcode:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

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

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Hoffe, das erspart jemandem eines Tages die zusätzliche Forschung. Ich habe ein bisschen nach einer Lösung gesucht, bevor ich darauf gekommen bin.

Jason Godson
quelle
2

Ich habe diesen Code verwendet -

Mit Fade Out Modal mit glattem Effekt ausblenden.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});
Sanjay Singhal
quelle
1

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.

$('.close:visible').click();
Dave
quelle
0

document.getElementById ('closeButton'). click (); // füge einem Element im Modal ein data-Entlassung = "modal" -Attribut hinzu und gib ihm diese ID

Dr. XD
quelle
-1

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.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

quelle
-2

Dies kann nur in HTML erfolgen:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>
jarosik
quelle
@ KevinFrancis Da die Frage nach einer programmatischen Möglichkeit sucht, dies vom Controller aus zu tun, und nicht danach, wie eine Schaltfläche erstellt wird, die dies tut.
GreenAsJade