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

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

Answer 2

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

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

Answer 3

Ich hatte ein ähnliches Problem, wie ich glaube. Die $('#myModal').modal('hide'); läuft wahrscheinlich durch diese Funktion und trifft auf die Zeile

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

Das Problem ist, dass der Wert isShown undefiniert sein kann, auch wenn das Modal angezeigt wird und der Wert true sein sollte. Ich habe den Bootstrap-Code leicht in den folgenden geändert

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

Damit schien das Problem größtenteils behoben zu sein. Wenn der Hintergrund immer noch vorhanden ist, können Sie immer einen Aufruf hinzufügen, um ihn nach dem Ausblenden-Aufruf manuell zu entfernen $('.modal-backdrop').remove(); . Nicht ideal, aber es funktioniert.

Answer 4

(Bezugnehmend auf Bootstrap 3), Um das Modal auszublenden, verwenden Sie: $('#modal').modal('hide') . Aber der Grund, warum der Hintergrund hing um (für mich) war, weil ich das DOM für das modale vor "hide" beendet zerstört wurde.

Um dieses Problem zu lösen, habe ich das ausgeblendete Ereignis mit der DOM-Entfernung verknüpft. 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

Answer 5

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