Comment masquer Bootstrap modal avec javascript?

J'ai lu les articles ici, le site Bootstrap et Googled comme un fou - mais je ne trouve pas que je suis sûr que c'est une réponse facile ...

J'ai un modal Bootstrap que j'ouvre à partir d'un assistant link_to comme celui-ci:

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

Dans mon ContactsController.createaction, j'ai du code qui crée Contactpuis passe à create.js.erb. Dans create.js.erb, j'ai du code de gestion des erreurs (un mélange de rubis et de javascript). Si tout se passe bien, je veux fermer le modal.

C'est là que j'ai des problèmes. Je n'arrive pas à rejeter le modal quand tout va bien.

J'ai essayé $('#myModal').modal('hide');et cela n'a aucun effet. J'ai également essayé $('#myModal').hide();ce qui provoque le rejet du modal mais laisse la toile de fond.

Des conseils sur la façon de fermer le modal et / ou de supprimer le fond de l'intérieur create.js.erb?

Éditer

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

Avec le modal ouvert dans la fenêtre du navigateur, utilisez la console du navigateur pour essayer

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

Si cela fonctionne (et que le modal se ferme), vous savez que votre Javascript proche n'est pas envoyé correctement du serveur au navigateur.

Si cela ne fonctionne pas, vous devez enquêter davantage sur le client. Par exemple, assurez-vous 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 fois?

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

pour fermer bootstrap modal, vous pouvez passer 'hide' comme option à la méthode modale comme suit

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

Veuillez jeter un œil au violon de travail ici

bootstrap fournit également des événements que vous pouvez connecter à la fonctionnalité modale , comme si vous souhaitez déclencher un événement lorsque le modal a fini d'être masqué à l'utilisateur, vous pouvez utiliser l' événement hidden.bs.modal , vous pouvez en savoir plus sur les méthodes et événements modaux ici dans Documentation

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

J'utilise Bootstrap 3.4 Pour moi, cela ne fonctionne pas

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

En désespoir de cause, je l'ai fait:

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

Ce n'est peut-être pas élégant, mais ça marche

La meilleure forme pour cacher et montrer un modal avec bootstrap c'est

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

Je rencontrais cette même erreur et cette ligne de code m'aide vraiment.

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

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

J'ai trouvé la bonne solution, vous pouvez utiliser ce code

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

Je suis tombé sur ce que je pense être un problème similaire. Le $('#myModal').modal('hide');passe probablement par cette fonction et atteint la ligne

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

Le problème est que la valeur isShown peut être indéfinie même si le modal est affiché et que la valeur doit être vraie. J'ai légèrement modifié le code d'amorçage comme suit

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

Cela semblait résoudre le problème pour la plupart. Si la toile de fond persiste, vous pouvez toujours ajouter un appel pour le supprimer manuellement après l'appel masqué $('.modal-backdrop').remove();. Pas idéal du tout mais fonctionne.

( Se référant à Bootstrap 3), Pour masquer l'utilisation modale: $('#modal').modal('hide'). Mais la raison pour laquelle la toile de fond traînait (pour moi) était parce que je détruisais le DOM pour le modal avant la fin de la «dissimulation».

Pour résoudre ce problème, j'ai enchaîné l'événement masqué avec la suppression 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

J'ai eu plus de chance de passer l'appel après le rappel "affiché":

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

Cela a permis de s'assurer que le modal était terminé avant l'appel de hide ().

Nous avons constaté qu'il y avait juste un léger délai entre l'appel à notre code serveur et le retour au succès. Si nous encapsulions l'appel au serveur dans le $("#myModal").on('hidden.bs.modal', function (e)gestionnaire, puis appelions la $("#myModal").modal("hide");méthode, le navigateur masquerait le modal, puis invoquerait le code côté serveur.

Encore une fois, pas élégant mais fonctionnel.

 function myFunc(){
        $("#myModal").on('hidden.bs.modal', function (e) {
            // Invoke your server side code here.
        });
        $("#myModal").modal("hide");
 };

Comme vous pouvez le voir, lorsque myFuncest invoqué, il masquera le modal, puis invoquera le code côté serveur.

Je rencontrais le même problème et après un peu d'expérimentation, j'ai trouvé une solution. Dans mon gestionnaire de clics, je devais empêcher l'événement de se propager, comme ceci:

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

Voici le doc: http://getbootstrap.com/javascript/#modals-methods

Voici la méthode: $ ('# myModal'). Modal ('hide')

Si vous avez besoin d'ouvrir plusieurs fois le modal avec un contenu différent, je vous suggère d'ajouter (en vous js principaux):

$('body').on('hidden.bs.modal', '.modal', function () {
      $(this).removeData('bs.modal');
    });

Vous nettoierez donc le contenu pour la prochaine ouverture et éviterez une sorte de mise en cache

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

Même moi, j'ai le même genre de problèmes. Cela m'a beaucoup aidé

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

J'ai utilisé ce code simple:

$("#MyModal .close").click();

$('#modal').modal('hide');et ses variantes ne fonctionnaient pas pour moi, sauf si j'avais data-dismiss="modal"comme attribut sur le bouton Annuler. Comme vous, mes besoins étaient probablement de fermer / éventuellement de ne pas fermer en fonction d'une logique supplémentaire, donc cliquer sur un lien avec data-dismiss="modal"carrément ne ferait pas l'affaire. J'ai fini par avoir un bouton caché avec data-dismiss="modal"lequel je pouvais invoquer par programme le gestionnaire de clics, donc

<a id="hidden-cancel" class="hide" data-dismiss="modal"></a>
<a class="close btn">Cancel</a>

puis à l'intérieur des gestionnaires de clic pour annuler lorsque vous devez fermer le modal que vous pouvez avoir

$('#hidden-cancel').click();

Nous devons nous occuper du bouillonnement des événements. Besoin d'ajouter une ligne de code

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });

Je me rends compte que c'est une vieille question, mais j'ai trouvé qu'aucun de ceux-ci n'était vraiment ce que je cherchais exactement. Cela semble provenir de la tentative de fermeture du modal avant qu'il ne soit terminé.

Ma solution était basée sur la réponse de @ schoonie23 mais j'ai dû changer certaines choses.

Tout d'abord, j'ai déclaré une variable globale en haut de mon script:

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

Puis dans mon code modal:

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

Ensuite, ceci: (Notez le nom 'shown.bs.modal' indiquant que le modal s'est affiché complètement par opposition à 'show' qui se déclenche lorsque l'événement show est appelé. (J'ai essayé à l'origine juste 'montré' mais cela n'a pas fonctionné. )

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

J'espère que cela épargnera à quelqu'un la recherche supplémentaire un jour. J'ai passé un peu de temps à chercher une solution avant d'en arriver là.

J'ai utilisé ce code -

Masquer le modal avec un effet lisse à l'aide de Fade Out.

$('#myModal').fadeOut();

$('.modal-backdrop').fadeOut();

$('.modal-open').css({'overflow': 'visible'});

Si vous utilisez la classe close dans vos modaux, ce qui suit fonctionnera. En fonction de votre cas d'utilisation, je recommande généralement de filtrer uniquement le modal visible s'il y a plus d'un modal avec la classe proche.

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

document.getElementById ('closeButton'). click (); // ajoute un attribut data-disable = "modal" à un élément du modal et lui donne cet id

C'est la mauvaise pratique mais vous pouvez utiliser cette technique pour fermer le modal en appelant le bouton de fermeture en javascript. Cela fermera modal après 3 secondes.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
window.onload=function()
{
setInterval(function(){ 

$("#closemodal").click();
}, 3000);

}
</script> 
</head>
<body>

   <div class="container">
 <h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"   data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
    </div>
  </div>

</div>
</div>

 </div>

</body>
</html>

cela peut être fait en HTML:

data-dismiss="modal"

<button type="button" class="btn btn-secondary" data-dismiss="modal">Save</button>