web-dev-qa-db-fra.com

Fermer bootstrap modal sans utiliser "masquer" et "ignorer les données"

Je veux fermer bootstrap modal box conditionnellement. Si j'utilise $('#modal').modal('hide'); this, quelque chose va mal avec mon code. Et si j'utilise data-dismiss="modal" dans le modèle HTML, l'action de rejet modal est exécutée avant que ma fonctionnalité réelle ne soit exécutée lors du clic sur le bouton.

Il existe donc une autre façon de fermer bootstrap modal ou toute idée d'utiliser data-dismiss="modal" lors de l'exécution?

jquerytwitter-bootstrapbootstrap-modal
14
Ruchi Agarwal

Vous pouvez le faire avec un comportement de fermeture modale automatique qui utilise le data-dismiss lui-même ou avec l'ouverture modale manuelle (comme je suppose que vous le faites actuellement), en vous abonnant à l'événement hide et en utilisant preventDefault sur l'événement.

$('yourmodalselector').on('hide',function(e){
   if(yourConditionNotToCloseMet){
      e.preventDefault();
   }
});

Démo

Demo2

Voir Documentation

l'événement d'événement hide est déclenché immédiatement lorsque la méthode d'instance hide a été appelée, ce qui est appelé de la même manière et c'est le meilleur endroit pour empêcher la fermeture du modal.

14
PSL

Faire un autre bouton comme celui-ci

<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>

Ce bouton contient data-dismiss="modal". Vous pouvez masquer cela si vous le souhaitez.

Maintenant, vous pouvez utiliser toute autre fonction de manière personnalisée et lorsque vous souhaitez masquer le modal, vous pouvez appeler

$(".btn-warning").click();
3
Bugfixer