Fermer Bootstrap Modal


432

J'ai une boîte de dialogue modale bootstrap que je veux afficher initialement, puis lorsque l'utilisateur clique sur la page, elle disparaît. J'ai les éléments suivants:

$(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 s'affiche initialement, mais il ne se ferme pas lorsque vous cliquez dessus en dehors du modal. De plus, la zone de contenu n'est pas grisée. Comment puis-je afficher le modal initialement, puis le fermer après que l'utilisateur a cliqué en dehors de la zone? Et comment faire pour que l'arrière-plan soit grisé comme dans la démo?


Vous initialisez votre modal avec $("#yourModal").modal()ou $('.modal').modal()?
merv

Ajout de plus de contexte ci-dessus. Merci pour toutes les idées @merv!
Nick B

oui ... qui a montré le problème. @Tamil a votre solution.
merv

Réponses:


706

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

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

5
Il est superflu d'inclure la bascule. Assurez-vous simplement de ne pas avoir de classe 'hide' sur la division modale. Mais oui, la faute de frappe était à l'origine du problème. alors +1
merv

22
non, il ne fonctionne pas comme prévu, il masque l'élément modal mais l'élément de superposition d'arrière-plan existe toujours, vous devez utiliser la solution @Subodth.
Parik Tiwari

1
@Pierre - pensez à supprimer votre commentaire, .modal (). Hide () n'est pas la même chose que .modal ('hide'), vous allez confondre les gens.
Michael Peterson

2
Comme Parik l'a dit, la bonne réponse utilise le modal ('hide')
MidouCloud

Ce n'est PAS la bonne réponse, vérifiez la réponse ci-dessous!
user1467439

412

pour fermer le modal bootstrap, 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 voulez déclencher un événement lorsque le modal a fini d'être caché à 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.


4
$ ('# modal'). modal ('toggle'); mieux cacher l'ombre modale
hamzeh.hanandeh

5
@ hamzeh.hanandeh, toggleconserve la superposition et n'est pas une solution. Vous devez toujours utiliser soit showou hide.
ryanpcmcquen

81
$('#modal').modal('toggle'); 

ou

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

devrait marcher.

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

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

10
celui avec hide () ferme le modal mais laisse l'arrière-plan flou. $ ("# modal .close"). click () le fait parfaitement. Je vous remercie!
Shilpa

4
Cela est déjà clairement documenté, il n'est pas nécessaire de simuler un clic, cela semble assez saccadé. La bonne réponse est: $ ('# modal'). Modal ('hide');
Michael Peterson

this -> $ ('# modal'). modal (). hide ();
TARA

J'ai un modèle qui ne se ferme pas $('#modal').modal('hide')mais je peux le fermer en utilisant $('#modal').modal('toggle')mais qui affiche une barre de défilement verticale après la fermeture. Donc, pour moi, cela $('#modal').hide()fonctionnait parfaitement, mais je veux savoir si cela créerait des problèmes? Et je code à l'intérieur, $('#modal .close').click()donc je ne pense pas que je pourrais l'utiliser pour fermer le modal.
Ahtisham

34

cela a fonctionné pour moi:

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

utiliser ce lien modal fermer


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

L'exécution de cet appel via la classe ($(".my-modal"))ne fonctionnera pas.



10

celui-ci est assez bon et il fonctionne également en angulaire 2

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

Fonctionne pour moi au lieu de $('#modal').modal('toggle');qui n'a aucun effet.
Todor Todorov

8

Mes cinq cents sur celui-ci, c'est que je ne veux pas avoir à cibler le modal bootstrap avec un identifiant et vu qu'il ne devrait y avoir qu'un seul modal à la fois, ce qui suit devrait être assez suffisant pour supprimer le modal car le basculement pourrait être dangereux :

$('.modal').removeClass('show');

2
Les intentions sont bonnes, mais cette approche ne fonctionnera pas toujours. D'autres éléments de page, y compris <body>, ont des classes ajoutées qui devraient également être annulées. La meilleure réponse est d'utiliser la 'hide'méthode.
JustinStolle

7

Dans certaines circonstances, une erreur de frappe pourrait être la cause. Par exemple, assurez-vous d'avoir:

data-dismiss="modal"

et pas

data-dissmiss="modal"

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


6

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

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

utilisez le code ci-dessus pour masquer la toile de fond du modal si vous utilisez plusieurs pop modaux sur une seule page.


Ou seulement $('.modal').modal('hide');fera l'affaire.
Matt Roy

6

<!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>


Erreur: "message": "TypeError non intercepté: $ (...). Le modal n'est pas une fonction"
Ivan Burlutskiy

Oui. J'ai l'erreur si "Exécuter l'extrait de code" dans Chrome (Linux Mint). Mais cela fonctionne dans Firefox.
Ivan Burlutskiy

1
@Ivan Burlutskiy, merci de m'avoir informé, c'est un problème avec jquery include, donc je l'ai corrigé. maintenant cela fonctionne bien dans tous les navigateurs.
Ganesh Putta

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

Salut - merci pour votre réponse. J'ai formaté cela en code (ce qui était assez simple - indentez un peu plus la première ligne). Cependant, je suppose que seul le $('#DeleteModal').modal('hide');est pertinent ici?
Rup

4

vous pouvez utiliser;

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

3

L'utilisation de modal.hide ne ferait que masquer le modal. Si vous utilisez la superposition sous le modal, elle serait toujours là. cliquez sur appel pour fermer le modal et supprimer la superposition.

$("#modalID .close").click()

3

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

Le code suivant peut être utilisé:

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

S'il vous plaît essayez d'éviter de simplement vider le code comme réponse et essayez d'expliquer ce qu'il fait et pourquoi. Votre code peut ne pas être évident pour les personnes qui n'ont pas l'expérience de codage appropriée. Veuillez modifier votre réponse pour inclure des clarifications, du contexte et essayer de mentionner toute limitation, hypothèse ou simplification dans votre réponse.
Frits

OK, donc ce que cela fait est de supprimer la classe modal-open, qui ferme le modal. supprime ensuite le fond de classe modal qui supprime la couverture grisâtre du modal
Orozcorp

3

J'ai fermé modal par programme avec cette astuce

Ajoutez un bouton en modal avec data-dismiss="modal"et masquez le bouton avec display: none. Voici à quoi cela ressemblera

<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 souhaitez fermer modal par programme, il suffit de déclencher un événement de 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

Ce code a parfaitement fonctionné pour moi pour fermer un modal (j'utilise bootstrap 3.3)

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

2

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

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

2

Ça marche bien

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

Cependant, lorsque vous avez plusieurs modaux empilés les uns sur les autres, cela n'est pas efficace, donc à la place, cela fonctionne

data-dismiss="modal"

2

Après quelques tests, j'ai constaté que pour le bootstrap, le modal doit attendre un certain temps avant d'exécuter l' $(.modal).modal('hide')after $(.modal).modal('show'). Et j'ai trouvé dans mon cas que j'avais besoin d'au moins 500 millisecondes d'intervalle entre les deux.
Voici donc mon cas de test et ma solution:

$('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

cela résout les problèmes que j'ai rencontrés avec la fermeture du modal alors que j'en ouvre pas un autre, merci
hal9000

2

Vous pouvez voir cette référence mais si ce lien a été supprimé, lisez cette description:

Appelez un modal avec id myModal avec une seule ligne de JavaScript:

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

Les options

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data- , comme dans data-backdrop = "" .

|-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

Les méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition. Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine. De plus, un appel de méthode sur un composant en transition sera ignoré.

Consultez notre documentation JavaScript pour plus d'informations.

.modal (options)

Active votre contenu en tant que modal. Accepte un objet d'options facultatif.

$('#myModal').modal({
   keyboard: false
})

.modal ('bascule')

Bascule manuellement un modal. Retourne à l'appelant avant que le modal ne soit réellement affiché ou masqué (c'est-à-dire avant que l'événement shown.bs.modal ou hidden.bs.modal ne se produise).

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

.modal («afficher»)

Ouvre manuellement un modal. Retourne à l'appelant avant que le modal ne soit réellement affiché (c'est-à-dire avant que l'événement shown.bs.modal ne se produise).

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

.modal ('cacher')

Masque manuellement un modal. Retourne à l'appelant avant que le modal ne soit réellement caché (c'est-à-dire avant que l'événement hidden.bs.modal ne se produise).

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

.modal ('handleUpdate')

Réajustez manuellement la position du modal si la hauteur d'un modal change alors qu'il est ouvert (c'est-à-dire au cas où une barre de défilement apparaît).

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

.modal («disposer»)

Détruit le modal d'un élément.

Événements

La classe modale de Bootstrap expose quelques événements pour se connecter à la fonctionnalité modale. Tous les événements modaux sont déclenchés sur le modal lui-même (c'est-à-dire sur le **). Type Description

|----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

0

De plus, vous pouvez «cliquer» sur un «x», ce qui ferme la boîte de dialogue. Par exemple:

$(".ui-dialog-titlebar-close").click();


0

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 typographique angulaire):

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 codé cet élément de bouton avec la classe .close aussi

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

0

Parfois, la solution ne fonctionne pas, vous devez donc supprimer correctement la classe et ajouter l'affichage CSS: aucun manuellement.

$("#modal").removeClass("in");
$("#modal").css("display","none");
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.