Empêcher le modal bootstrap de disparaître en cliquant en dehors ou en appuyant sur échapper?

Si vous utilisez JavaScript, alors:

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

et si HTML:

Fonctionne aussi, data-backdrop="static" pour cliquer et data-keyboard="false" pour Esc dans votre mod modal:

Ajoutez simplement les atsortingbuts data-backdrop="static" et data-keyboard="false" à ce modal.

Par exemple.

Vous pouvez utiliser le code ci-dessous

 $.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static'; 

pour changer le comportement par défaut.

Vous pouvez également utiliser Direct dans le modèle bootstrap.

 jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false}); 

J’utilise ces atsortingbuts et ça marche, data-keyboard="false" data-backdrop="static"

Si vous avez besoin de désactiver le clic en dehors mais permettre d’appuyer sur Échap

  $ ('# myModal'). modal ({
     backdrop: 'static', // Cette option est désactivée pour les événements en dehors des clics
     keyboard: true // Ceci pour l'événement clavier
 }) 

Le script suivant a fonctionné pour moi:

 // prevent event when the modal is about to hide $('#myModal').on('hide.bs.modal', function (e) { e.preventDefault(); e.stopPropagation(); return false; }); 

Votre code fonctionne lorsque je clique sur le côté modal, mais si j’utilise input champ de input HTML dans input corps modal, concentrez votre curseur sur cette entrée, puis appuyez sur la touche esc le modal est fermé. Cliquez ici

 
 
 
 
 
Modal title
 
 
 
One fine body…
 
 
 
 

Je pense que ce codepen peut vous aider à éviter les css et bootstrap modaux

Si vous devez configurer ceci après l’affichage du modal, vous pouvez utiliser la solution @Nabid. Cependant, vous devez parfois autoriser une méthode pour fermer le modal. En supposant que vous avez un bouton avec la classe really-close-the-modal , qui devrait vraiment fermer le modal, vous pouvez utiliser ce code (jquery):

 var closeButtonClicked = false; $('.really-close-the-modal').on('click', function () { closeButtonClicked = true; }); $('#myModal').on('hide.bs.modal', function (e) { if (!closeButtonClicked) { e.preventDefault(); e.stopPropagation(); return false; } closeButtonClicked = false; }); 

Ce n’est pas vraiment une belle conception de code, mais cela m’a aidé dans une situation où le modal était montré avec une animation de chargeur, jusqu’à ce qu’une requête ajax soit retournée, et alors seulement je pourrais savoir si le modal devait être configuré pour empêcher “implicite” fermeture. Vous pouvez utiliser un design similaire pour éviter de fermer le modal pendant qu’il est en cours de chargement.