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

Das Ausblenden des Modalhintergrunds funktioniert, aber bei jedem weiteren Öffnen des Modals wird der Hintergrund nicht wie gewünscht ausgeblendet. Ich habe festgestellt, dass dies immer funktioniert:

// SHOW
$('#myModal').modal('show')
$('.modal-backdrop').show();

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

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

Ich hatte das gleiche Problem, und nach ein wenig Experimentieren habe ich eine Lösung gefunden. In meinem Click-Handler, musste ich das Ereignis von Blasenbildung zu stoppen, wie so:

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

Answer 5

In meinem Fall habe ich offenbar versucht, das Dialogfeld zu schnell zu schließen, nachdem ich es angezeigt hatte. Daher habe ich in meiner Funktion zum Schließen des Modals Folgendes verwendet:

setTimeout(() => {
    $('#loadingModal').modal('hide');
}, 300);