Comment masquer la modale Bootstrap avec javascript ?

Question

J'ai lu les messages ici, le site Bootstrap et j'ai fait des recherches sur Google, mais je n'arrive pas à trouver ce que je pense être une réponse facile...

J'ai une modale Bootstrap que j'ouvre à partir d'une aide link_to comme ceci :

<%= link_to "New Contact", new_contact_path, {remote: true, 'data-toggle' => 'modal', 'data-target' => "#myModal",  class: "btn btn-primary"} %>

Dans mon ContactsController.create j'ai du code qui crée Contact puis passe à create.js.erb . Sur create.js.erb J'ai un code de gestion des erreurs (un mélange de ruby et de javascript). Si tout se passe bien, je veux fermer la modale.

C'est là que j'ai des problèmes. Je ne parviens pas à rejeter la modale lorsque tout va bien.

J'ai essayé $('#myModal').modal('hide'); et cela n'a aucun effet. J'ai également essayé $('#myModal').hide(); qui fait disparaître la modale mais laisse le fond d'écran.

Des conseils sur la manière de fermer la modale et/ou de rejeter la toile de fond depuis l'intérieur. create.js.erb ?

Modifier

Voici le balisage de 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

Avec la modale ouverte dans la fenêtre du navigateur, utilisez la console du navigateur pour essayer de

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

Si cela fonctionne (et que la modale se ferme), vous savez alors que votre Javascript de fermeture est pas sont envoyés correctement du serveur au navigateur.

Si cela ne fonctionne pas, vous devez examiner de plus près ce qui se passe sur le client. Par exemple, vérifiez qu'il n'y a pas deux éléments avec le même identifiant. Par exemple, cela fonctionne-t-il la première fois après le chargement de la page, mais pas la deuxième ?

La console du navigateur : firebug pour firefox, la console de débogage pour Chrome ou Safari, etc.

Answer 2

pour fermer le bootstrap modal vous pouvez passer "cacher en option de la méthode modale comme suit

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

Veuillez jeter un coup d'œil sur le travail tripoter ici

bootstrap fournit également des événements auxquels vous pouvez vous accrocher. modal par exemple, si vous souhaitez déclencher un événement lorsque la modale a fini d'être masquée à l'utilisateur, vous pouvez utiliser la fonction caché.bs.modal vous pouvez en savoir plus sur les méthodes et les événements modaux dans le document suivant Documentation

Si aucune des méthodes ci-dessus ne fonctionne, donnez un identifiant à votre bouton de fermeture et déclenchez le clic sur le bouton de fermeture.

Answer 3

J'ai rencontré ce que je crois être un problème similaire. Le site $('#myModal').modal('hide'); est probablement en train d'exécuter cette fonction et frappe la ligne

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

Le problème est que la valeur isShown peut être indéfinie même si la modale est affichée et que la valeur devrait être vraie. J'ai légèrement modifié le code bootstrap pour obtenir ce qui suit

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

Cela a semblé résoudre le problème en grande partie. Si l'arrière-plan persiste, vous pouvez toujours ajouter un appel pour le supprimer manuellement après l'appel de masquage. $('.modal-backdrop').remove(); . Ce n'est pas du tout l'idéal, mais cela fonctionne.

Answer 4

(Se référant à Bootstrap 3), Pour cacher la modale utiliser : $('#modal').modal('hide') . Mais la raison pour laquelle la toile de fond est restée en place (pour moi) est que je détruisais le DOM de la modale avant la fin de la fonction 'hide'.

Pour résoudre ce problème, j'ai enchaîné l'événement caché avec le retrait du DOM. Dans mon cas : 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

J'ai eu plus de chance de passer l'appel après que le rappel "montré" ait eu lieu :

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

Cela permet de s'assurer que le chargement de la modale est terminé avant que l'appel à hide() ne soit effectué.