Comment puis-je empêcher les modulaires angi-ui de se fermer?

J’utilise Angular UI $ modal dans mon projet http://angular-ui.github.io/bootstrap/#/modal

Je ne veux pas que l’utilisateur ferme le modal en appuyant sur la canvas de fond. Je veux qu’un modal ne puisse être fermé qu’en appuyant sur le bouton de fermeture que j’ai créé.

Comment puis-je empêcher la fermeture de modal?

Pendant que vous créez votre modal, vous pouvez spécifier son comportement:

$modal.open({ // ... other options backdrop : 'static', keyboard : false }); 
 backdrop : 'static' 

Travaillera pour les événements “clic” mais vous pouvez toujours utiliser la touche “Echap” pour fermer la fenêtre contextuelle.

 keyboard :false 

pour empêcher la popup de fermer par la touche “Esc”.

Merci à pkozlowski.opensource pour la réponse.

Je pense que la question est un doublon de l’ interface utilisateur angular Bootstrap Modal – comment empêcher l’interaction de l’utilisateur

Ancienne question, mais si vous souhaitez append des boîtes de dialog de confirmation sur diverses actions fermées, ajoutez-la à votre contrôleur d’instance modale:

 $scope.$on('modal.closing', function(event, reason, closed) { console.log('modal.closing: ' + (closed ? 'close' : 'dismiss') + '(' + reason + ')'); var message = "You are about to leave the edit view. Uncaught reason. Are you sure?"; switch (reason){ // clicked outside case "backdrop click": message = "Any changes will be lost, are you sure?"; break; // cancel button case "cancel": message = "Any changes will be lost, are you sure?"; break; // escape key case "escape key press": message = "Any changes will be lost, are you sure?"; break; } if (!confirm(message)) { event.preventDefault(); } }); 

J’ai un bouton de fermeture en haut à droite, qui déclenche l’action “annuler”. En cliquant sur la canvas de fond (si elle est activée), l’action d’annulation est déclenchée. Vous pouvez l’utiliser pour utiliser différents messages pour différents événements proches.

C’est ce qui est mentionné dans la documentation

backdrop – contrôle la présence d’une canvas de fond. Valeurs autorisées: true (par défaut), false (pas de backdrop), ‘static’ – backdrop est présent mais la fenêtre modale n’est pas fermée en cliquant en dehors de la fenêtre modale.

static peut fonctionner.

Configurer globalement,

décorateur , l’ une des meilleures caractéristiques en angular. donne la possibilité de “patcher” des modules tiers.

Disons que vous voulez ce comportement dans toutes vos références $modal et que vous ne voulez pas modifier vos appels,

Vous pouvez écrire un décorateur . qui ajoute simplement aux options – {backdrop:'static', keyboard:false}

 angular.module('ui.bootstrap').config(function ($provide) { $provide.decorator('$modal', function ($delegate) { var open = $delegate.open; $delegate.open = function (options) { options = angular.extend(options || {}, { backdrop: 'static', keyboard: false }); return open(options); }; return $delegate; }) }); 
  • Note: dans les dernières versions, le $modal renommé en $uibModal

Démo en ligne – http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview

pour la nouvelle version de ngDialog (0.5.6), utilisez:

 closeByEscape : false closeByDocument : false