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

Verwenden Sie die Konsole des Browsers, während das Modal im Browserfenster geöffnet ist, um Folgendes zu versuchen

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

Wenn es funktioniert (und das Modal schließt sich), dann wissen Sie, dass Ihr Close-Javascript pas korrekt vom Server an den Browser gesendet werden.

Wenn das nicht funktioniert, müssen Sie auf dem Client weiter nachforschen, was los ist. Stellen Sie z. B. sicher, dass es nicht zwei Elemente mit der gleichen ID gibt. Funktioniert es zum Beispiel beim ersten Mal nach dem Laden der Seite, aber nicht beim zweiten Mal?

Konsole des Browsers: firebug für Firefox, die Debugging-Konsole für Chrome oder Safari, usw.

Answer 2

Bootstrap schließen modal können Sie bestehen verstecken als Option zur modalen Methode wie folgt

$('#modal').modal('hide');

Bitte sehen Sie sich die Arbeit an hier fummeln

bootstrap bieten auch Ereignisse, die Sie einhaken können modal Funktionalität, z. B. wenn Sie ein Ereignis auslösen wollen, wenn das Modal nicht mehr vor dem Benutzer verborgen ist, können Sie versteckt.bs.modal Ereignis können Sie mehr über modale Methoden und Ereignisse hier nachlesen Dokumentation

Wenn keine der oben genannten Methoden funktioniert, geben Sie Ihrer Schließen-Schaltfläche eine ID und lösen Sie einen Klick auf die Schließen-Schaltfläche aus.

Answer 3

Die beste Form zu verstecken und zeigen ein modales mit Bootstrap ist es

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

Answer 4

Ich benutze Bootstrap 3.4 Bei mir funktioniert das nicht

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

In meiner Verzweiflung habe ich dies getan:

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

Vielleicht ist es nicht elegant, aber es funktioniert

Answer 5

Ich hatte den gleichen Fehler, und diese Codezeile hilft mir wirklich.

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