Comment masquer Bootstrap modal avec javascript?


282

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>

1
$('#myModal').modal('hide');est la syntaxe correcte pour fermer / masquer le modal avec id myModal(vous pouvez le tester sur la page de documentation Bootstrap ). Êtes-vous sûr d'avoir un élément avec cet identifiant sur votre page? Aussi, qu'essayez-vous d'accomplir avec cet appel? Votre implémentation actuelle exécute une requête Ajax pour new_contact_pathet en même temps ouvre le modal avec le contenu de #myModal- est-ce ce que vous voulez?
Julian D.

Salut, Julian. J'ai posté le balisage myModal ci-dessus et il y a, en effet, un div avec id myModal. J'ai réessayé $('myModal').modal('hide')et toujours pas bon. HM. En termes de ce que j'essaie d'accomplir, je pense qu'il peut être incorrect d'utiliser l'aide link_to. J'ai remplacé cela par: <a data-toggle="modal" href="#myModal" class="btn btn-primary">Add Contact</a>puisque je n'ai pas vraiment besoin d'un appel à new_contact_path. Je veux juste que le modal s'ouvre, puis traite les entrées utilisateur. Merci de prendre le temps de répondre. Je vais voir si je ne peux pas régler ça.
jvillian

Je suppose que c'est juste une faute de frappe, mais l'appel devrait l'être $('#myModal').modal('hide');(il #manque un commentaire).
Julian D.

1
Mon mauvais pour taper au lieu de copier à partir du code réel. Le code actuel se lit comme suit: $('#myModal').modal('hide'). J
jvillian

Vous pouvez essayer d'utiliser bootboxjs
md. ariful ahsan

Réponses:


495

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.


Le deuxième paragraphe était ce que je cherchais. Des ID en double empêchaient mes modaux de s'afficher correctement la deuxième fois.
Matias

Cela a résolu le problème pour moi. Merci.
Finchy70

77

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.


1
Ceci est particulièrement utile lorsque vous savez exactement à quel moment la boîte de dialogue modale est censée se fermer. Par exemple à la fin d'une fonction de réussite. De cette façon, s'il y a une erreur, la boîte de dialogue peut l'afficher.
Will

47

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


2
Ce serait mieux si vous utilisez $ (". Modal-backdrop"). Remove ();
Bloodhound

1
cela introduira de nouveaux bugs. veuillez utiliser les méthodes recommandées,
Benjamin Eckstein

jQuery ('. modal-backdrop'). click ();

petit buggy mais fonctionne sûrement. La solution de Manuel Fernando ci-dessous a parfaitement fonctionné pour moi.
Munam Yousuf

@Umingo, veuillez recommander une méthode si celles mentionnées ici ne sont pas bonnes et que vous en connaissez une.
span

47

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

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

De loin la meilleure réponse. Simuler un comportement avec des clics, jQuery fadeOut ou css peut créer des désalignements à long terme.
Giorgio Tempesta

43

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

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

1
J'ai lu un autre problème qui suggérait que le problème pourrait avoir l'attribut data-disable sur l'élément, puis en plus de cela pour tenter de le déclencher à partir de javascript
Femtosecond

Merci beaucoup Manuel, ceci après de nombreuses recherches a résolu mon problème, $ ('# MyModelId'). Modal ('hide'); $ ("[data-disable = modal]"). trigger ({type: "click"}); que je voulais fermer le modal sur le succès ajax .... merci beaucoup mon cher
abdelrhman raafat

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

cela a fonctionné, mais j'ai cassé le modal si je l'ouvre à nouveau, le modal ne défile plus
kosas

21

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

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

meilleure solution jusqu'à présent
kosas

superbe est tout simplement le meilleur +1
MooMoo

11

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.


11

( 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

1
mais pouvez-vous s'il vous plaît me parler de this.render()son affichage undefined is not a functiondans ma console chromée.
Anil Kumar Pandey

9

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


8

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.


6

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

6

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


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

5

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

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


4

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

Dans mon cas (page asp net razor), je l'avais similaire à l'OP: j'avais un div un peu vide avec la classe "modal" et y ai ajouté dynamiquement un fichier cshtml, par exemple le corps modal et ajouté un clic sur un bouton de ce corps dès que le modal sera affiché. appeler ".modal ('hide)" seul n'était pas suffisant, comme vous l'avez souligné: "data-disable =" modal "" sur le bouton d'invocation était l'affaire !!! ty
Csharpest

3

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

3

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à.


2

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

1

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

0

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


-1

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>

-2

cela peut être fait en HTML:

data-dismiss="modal"

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

@KevinFrancis Parce que la question est à la recherche d'un moyen programmatique pour le faire à partir du contrôleur, pas comment créer un bouton qui le fait.
GreenAsJade
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.