web-dev-qa-db-fra.com

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 ce que je suis sûr de trouver une réponse facile ...

J'ai un modal 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 action ContactsController.create, j'ai un code qui crée Contact puis passe à create.js.erb. Dans create.js.erb, j'ai un code de traitement des erreurs (un mélange de Ruby et 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 aussi essayé $('#myModal').hide(); qui provoque le rejet de la modale mais laisse la toile de fond.

Avez-vous des conseils sur la façon de fermer le modal et/ou de rejeter le fond de 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>
javascripttwitter-bootstrapmodal-dialog
256
jvillian

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

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

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

Si cela ne fonctionne pas, vous devez vous renseigner davantage sur ce qui se passe chez 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.

456
Larry K

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

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

S'il vous plaît jeter un oeil à travailler violon ici

bootstrap fournit également des événements auxquels vous pouvez vous connecter modal fonctionnalité, comme si vous voulez déclencher un événement lorsque le modal a fini d'être caché de l'utilisateur, vous pouvez utiliser hidden .bs.modal vous pouvez en savoir plus sur les méthodes modales et les événements ici dans Documentation

Si la méthode ci-dessus ne fonctionne pas, donnez un identifiant à votre bouton de fermeture et cliquez sur le bouton de fermeture.

69
Subodh Ghulaxe

J'utilise Bootstrap 3.4 Pour moi cela ne fonctionne pas

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

En désespoir de cause, j'ai fait ceci:

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

Peut-être que ce n'est pas élégant, mais ça marche

44
gaza

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

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

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

// SHOW
$('#ModalForm').modal('show');
// HIDE
$('#ModalForm').modal('hide');
25
Royer Vazquez
$('#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
18
Shivam

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

$('.close').click();
17
Osama khodrog

(En référence à 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 'hide'.

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

Je suis tombé sur ce que je crois être un problème similaire. La $('#myModal').modal('hide'); est probablement en cours d'exécution à travers 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 le modal est affiché et que la valeur doit être vraie. J'ai légèrement modifié le code d'amorçage pour le code suivant

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

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

8
Richard Handley

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

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

Cela garantissait le chargement du modal avant l'appel de hide ().

7
schoonie23

Ce que nous avons constaté, c’est qu’il n’y avait qu'un léger délai entre l’appel de notre code serveur et le retour de l’appel à succès. Si nous encapsulons l'appel au serveur dans le gestionnaire $("#myModal").on('hidden.bs.modal', function (e), puis appelons la méthode $("#myModal").modal("hide");, le navigateur masque le modal puis appelle 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 constater, lorsque myFunc est appelé, le code modal est masqué, puis le code côté serveur est appelé.

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

J'éprouvais 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 suit:

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

Voici la 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 suggère d'ajouter (en vous js principal):

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

Donc, vous allez nettoyer le contenu pour la prochaine ouverture et éviter une sorte de cache

4
Christophe Meheut Forik 21

$('#modal').modal('hide'); et ses variantes ne fonctionnaient pas pour moi sauf si j'avais data-dismiss="modal" en tant qu'attribut du bouton Annuler. Comme vous, mes besoins étaient peut-être de fermer/ne pas fermer en fonction d'une logique supplémentaire. Un clic sur un lien avec data-dismiss="modal" ne suffirait donc pas. J'ai fini par avoir un bouton caché avec data-dismiss="modal" que je pouvais invoquer par programme le gestionnaire de clics,

<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, vous pouvez avoir

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

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

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

Nous devons nous occuper des événements bouillonnants. 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
Prathap Kudupu

Je me rends compte que c’est une vieille question, mais j’ai trouvé qu’aucune d’entre elles n’était vraiment ce que je cherchais exactement. Cela semble être causé par la fermeture du modal avant la fin de la diffusion.

Ma solution était basée sur la réponse de @ schoonie23 mais je devais changer quelques petites 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 a été montré complètement, par opposition à 'show' qui se déclenche lorsque l'événement show est appelé. )

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

J'espère que cela sauvera quelqu'un des recherches supplémentaires un jour. J'ai passé un peu de temps à chercher une solution avant de proposer cela.

3
Jason Godson

J'ai utilisé ce code -

Cacher modale avec effet lisse en utilisant Fade Out.

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

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

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

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

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

C'est la mauvaise pratique, mais vous pouvez utiliser cette technique pour fermer 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>
0
user5093161

J'ai utilisé ce code simple:

$("#MyModal .close").click();
0
Viktor Kisil'ov