Wie verstecke ich Bootstrap Modal mit Javascript?

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>

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.

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.

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

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

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');

Ich hatte denselben Fehler und diese Codezeile hilft mir wirklich.

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

$('#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

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

$('.close').click(); 

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.

(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

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.

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.

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

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

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide'); 

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

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

Ich habe diesen einfachen Code verwendet:

$("#MyModal .close").click();

$('#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();

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

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.

Ich habe diesen Code verwendet -

Mit Fade Out Modal mit glattem Effekt ausblenden.

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

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

$('.modal-open').css({'overflow': 'visible'});

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

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

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>

Dies kann nur in HTML erfolgen:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>