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 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 2

Auch ich habe die gleichen Probleme. Dies half mir sehr

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

Answer 3

$('.modal-backdrop').hide(); // for black background
$('body').removeClass('modal-open'); // For scroll run
$('#modal').modal('hide');

Answer 4

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

Answer 5

Mir ist klar, dass dies eine alte Frage ist, aber ich fand, dass keine dieser Fragen wirklich genau das war, wonach ich suchte. Es scheint durch den Versuch, das Modal zu schließen, bevor es fertig angezeigt wird, verursacht werden.

Meine Lösung basierte auf der Antwort von @schoonie23, aber ich musste ein paar Dinge ändern.

Zuerst habe ich eine globale Variable am Anfang meines Skripts deklariert:

<script>
    var closeModal = false;
    ...Other Code...

Dann in meinem modalen Code:

$('#myModal').on('show.bs.modal', function (event) {
    ...Some Code...
    if (someReasonToHideModal) {
        closeModal = true;
        return;
    }
    ...Other Code...

Dann dies: (Beachten Sie den Namen "shown.bs.modal", der angibt, dass das Modal vollständig angezeigt wurde, im Gegensatz zu "show", das ausgelöst wird, wenn das Ereignis "show" aufgerufen wird. (Ursprünglich habe ich nur 'shown' ausprobiert, aber das hat nicht funktioniert.)

$('#myModal').on('shown.bs.modal', function (event) {
    if (closeEditModal) {
        $('#myModal').modal('hide');
        closeModal = false;
    }
});

Ich hoffe, das erspart eines Tages jemandem die zusätzliche Recherche. Ich verbrachte ein bisschen auf der Suche nach einer Lösung, bevor ich mit diesem kam.