Fermer Bootstrap Modal

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?

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

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

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.

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

cela a fonctionné pour moi:

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

utiliser ce lien modal fermer

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

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

Essaye ça

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

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

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

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

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.

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.

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

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

vous pouvez utiliser;

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

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

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

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

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

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

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

Ç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"

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

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

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

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

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>

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