web-dev-qa-db-fra.com

Fermer Bootstrap Modal

Je souhaite afficher une boîte de dialogue modale bootstrap, puis lorsque l'utilisateur clique sur la page, elle disparaît. J'ai le suivant:

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

Le modal est affiché initialement, mais il ne ferme pas lorsque vous cliquez en dehors du modal. De plus, la zone de contenu n'est pas grisée. Comment puis-je obtenir l'affichage initial du modal, puis sa fermeture après que l'utilisateur a cliqué en dehors de la zone? Et comment puis-je obtenir que l'arrière-plan soit grisé comme dans la démo?

jquerytwitter-bootstrapmodal-dialog
355
Nick B

Mettez modal('toggle') au lieu de modal(toggle)

$(function () {
   $('#modal').modal('toggle');
});
572
Tamil Selvan C

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

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

S'il vous plaît jetez un oeil à travailler VIOLON ICI

bootstrap fournit également des événements que vous pouvez rattacher à la fonctionnalité modale . Par exemple, si vous souhaitez déclencher un événement lorsque le modal a été masqué, vous pouvez utiliser l'événement hidden.bs.modal peut en savoir plus sur les méthodes modales et les événements ici dans DOCUMENTATION

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

344
Subodh Ghulaxe
$('#modal').modal('toggle');

ou 

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

devrait marcher.

Mais si rien ne fonctionne, vous pouvez appeler le bouton de fermeture modale directement:

$("#modal .close").click()
59
Robert Benyi

cela a fonctionné pour moi:

<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

utiliser ce lien modal close

27
santhosh
$("#your-modal-id").modal('hide');

Exécuter cet appel via la classe ($(".my-modal")) ne fonctionnera pas.

16
Yishai Landau

celui-ci est très bon et ça marche aussi en angulaire 2 

$("#modal .close").click()
10
user3869304

Mon cinq centimes sur celui-ci est que je ne veux pas avoir à cibler le modal bootstrap avec un identifiant et vu qu'il ne devrait y avoir qu'un modal à la fois, ce qui suit devrait suffire à supprimer le modal car le basculement pourrait être dangereux. :

$('.modal').removeClass('show');
7
Andre Van Zuydam

Dans certaines circonstances, une faute de frappe pourrait être le coupable. Par exemple, assurez-vous d'avoir:

data-dismiss="modal"

et pas 

data-dissmiss="modal"

Notez le double "ss" dans le deuxième exemple qui entraînera l'échec du bouton Fermer.

7
zinczinc

Nous pouvons fermer la fenêtre contextuelle modale des manières suivantes: 

// We use data-dismiss property of modal-up in html to close the modal-up,such as

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div>

 // We can close the modal pop-up through Java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.
6
Sheo Dayal Singh
   function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };
5
Sheladiya Ajay

Essayez ceci

$('#modal_id').modal('hide');
5
Love Kumar

<!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/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</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">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

4
Ganesh Putta

vous pouvez utiliser;

$('#' + $('.modal.show').attr('id')).modal('hide');
4
Fatih Turan

Utiliser modal.hide ne cacherait que le modal. Si vous utilisez un calque sous le modal, il sera toujours là. utilisez click call pour fermer le modal et supprimer la superposition.

$("#modalID .close").click()
3
Vikalp Veer

Une autre façon de procéder consiste à supprimer d’abord la classe modal-open, qui ferme le modal. Ensuite, vous supprimez la classe modal-backdrop qui supprime la couverture grisâtre du modal. 

Le code suivant peut être utilisé:

$('body').removeClass('modal-open')
$('.modal-backdrop').remove()
3
Orozcorp

Ce code a parfaitement fonctionné pour que je ferme un modal (j'utilise bootstrap 3.3)

$('#myModal').removeClass('in')
2
user3870075

Dans mon cas, la page principale à partir de laquelle le modal bootstrap a été déclenché a commencé à ne pas répondre après l'utilisation de $("#modal").modal('toggle');, mais a commencé à répondre de la manière suivante:

$("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});
2
Awais Nasir

_ {J'ai fermé modal par programmation avec cette astuce} _

Ajoutez un bouton en modal avec data-dismiss="modal" et masquez le bouton avec display: none. Voici à quoi ça va ressembler

<div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

Maintenant, lorsque vous voulez fermer modal par programmation, simplement _ {déclenchez un événement clic} _ sur ce bouton, qui n'est pas visible pour l'utilisateur

En Javascript, vous pouvez déclencher un clic sur ce bouton comme ceci:

document.getElementById('close-modal').click();
2
Zohab Ali

Dans mon cas, j'ai utilisé un bouton pour afficher le modal 

<button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

Donc dans mon code, pour fermer le modal (qui a l'id = 'my-modal-to-show'), j'appelle cette fonction (en Angular TypeScript):

closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

Si j'appelle $ (modalId) .modal ('hide') cela ne fonctionne pas et je ne sais pas pourquoi

PS .: dans mon modal, j'ai également codé cet élément de bouton avec la classe .close 

<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>
0
Anderson Dourado Cunha

Ça marche bien

$(function () {
   $('#modal').modal('toggle');
});

Cependant, lorsque vous avez plusieurs modules empilés les uns sur les autres, cela n’est pas efficace;

data-dismiss="modal"
0
Edgar256