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

Ich hatte mehr Glück mit dem Anruf, nachdem der Rückruf "angezeigt" wurde:

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

Dadurch wurde sichergestellt, dass das Modal vor dem Aufruf von hide() fertig geladen war.

Answer 2

Wir stellten fest, dass zwischen dem Aufruf unseres Server-Codes und der Rückkehr zum Erfolgs-Callback nur eine geringe Verzögerung auftrat. Wenn wir den Aufruf an den Server in die $("#myModal").on('hidden.bs.modal', function (e) Handler und rief dann die $("#myModal").modal("hide"); Methode, würde der Browser das Modal ausblenden und dann den serverseitigen Code aufrufen.

Auch hier gilt: 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, wenn myFunc aufgerufen wird, wird das Modal ausgeblendet und dann der serverseitige Code aufgerufen.

Answer 3

Ich habe diesen einfachen Code verwendet:

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

Answer 4

Hier ist das Dokument: http://getbootstrap.com/javascript/#modals-methods

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

Wenn Sie mehrere Male das Modal mit verschiedenen Inhalten öffnen müssen, schlage ich vor, (in der Haupt-JS) hinzuzufügen:

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

So bereinigen Sie den Inhalt für das nächste Öffnen und vermeiden eine Art von Zwischenspeicherung

Answer 5

$('#modal').modal('hide'); und seine Varianten haben bei mir nicht funktioniert, es sei denn, ich hatte data-dismiss="modal" als Attribut für die Schaltfläche Abbrechen. Wie Sie, waren meine Bedürfnisse zu möglicherweise schließen / möglicherweise nicht schließen basierend auf einige zusätzliche Logik, so dass ein Link mit data-dismiss="modal" würde nicht ausreichen. Am Ende hatte ich eine versteckte Schaltfläche mit data-dismiss="modal" von dem aus ich den Click-Handler programmatisch aufrufen kann, also

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

und dann innerhalb der Click-Handler für Abbrechen, wenn Sie das Modal schließen müssen, können Sie haben

$('#hidden-cancel').click();