Wie man Bootstrap modal mit Javascript ausblenden?

Question

Ich habe die Beiträge hier gelesen, die Bootstrap-Website, und gegoogelt wie verrückt - aber kann nicht finden, was ich bin sicher, ist eine einfache Antwort ...

Ich habe ein Bootstrap-Modal, das ich von einem link_to-Helper wie folgt öffnen:

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

私の中で ContactsController.create Aktion habe ich Code, der Folgendes erzeugt Contact geht dann über zu create.js.erb . Unter create.js.erb Ich habe einige Fehlerbehandlung Code (eine Mischung aus Ruby und Javascript). Wenn alles gut geht, möchte ich das Modal zu schließen.

Das ist der Punkt, an dem ich Probleme habe. Ich kann nicht scheinen, um die modale zu entlassen, wenn alles gut geht.

Ich habe versucht $('#myModal').modal('hide'); und das hat keine Auswirkungen. Ich habe auch versucht $('#myModal').hide(); was dazu führt, dass das modale Fenster geschlossen wird, aber der Hintergrund erhalten bleibt.

Hinweise zum Schließen des Modals und/oder zum Verlassen des Hintergrunds von innen create.js.erb ?

Editar

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>

Answer 1

Wir müssen uns um Event Bubbling 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
    });

Answer 2

Document.getElementById('closeButton').click(); // Fügen Sie ein data-dismiss="modal" Attribut zu einem Element im Modal hinzu und geben Sie ihm diese ID

Answer 3

Ich habe diesen Code verwendet -

Ausblenden des Modals mit sanftem Effekt durch Fade Out.

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

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

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

Answer 4

Ich stand vor einem ähnlichen Problem, wo meine benutzerdefinierte Modal würde über js zeigen, aber ich konnte es nicht ausblenden (es gab keine Schaltfläche schließen).

Für mich bestand die Lösung darin, den Inhalt in eine modal-dialog .

<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="loading">
  <div class="modal-dialog">
    loading
  </div>
</div>

Ohne die modal-dialog wird das Modal zwar angezeigt, aber es war nicht möglich, es ohne die manuellen Lösungen in einigen der Antworten hier auszublenden, von denen einige verhindern, dass Sie das Modal wieder anzeigen können.

Answer 5

Wenn Sie die Klasse close in Ihren Modals verwenden, funktioniert das Folgende. Je nach Anwendungsfall empfehle ich generell, nur das sichtbare Modal zu filtern, wenn es mehr als ein Modal mit der Klasse close gibt.

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