Comment puis-je empêcher angular-ui modal de se fermer?

j'utilise L'UI angulaire $ modal dans mon projet http://angular-ui.github.io/bootstrap/#/modal

Je ne veux pas que l'utilisateur ferme le modal en appuyant sur toile de fond. Je veux un modal peut seulement être fermé en appuyant sur le bouton Fermer que j'ai créé.

comment empêcher modal de se fermer ?

77
demandé sur Rahul Prasad 2013-11-29 16:59:37

6 réponses

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

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});
170
répondu artur grzesiak 2016-03-18 12:16:56
backdrop : 'static'

fonctionnera pour les événements 'click' mais vous pouvez toujours utiliser la touche" Esc " pour fermer le popup.

keyboard :false

pour empêcher le popup près de la touche" Esc".

merci à pkozlowski.opensource pour la réponse.

je pense que la question est une duplication de Angulaire UI Bootstrap Modal - comment empêcher l'interaction de l'utilisateur

29
répondu Sachin G. 2017-05-23 12:03:09

ancienne question, mais si vous voulez ajouter des dialogues de confirmation sur diverses actions de fermeture, ajoutez ceci à votre contrôleur d'instance modal:

$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" cancel". En cliquant sur la toile de fond (si activée), l'action d'annulation est déclenchée. Vous pouvez utiliser cela pour utiliser des messages différents pour divers événements de fermeture.

18
répondu Tiago 2016-03-16 11:54:25

C'est ce qui est mentionné dans la documentation

toile de fond-contrôle la présence d'une toile de fond. Valeurs autorisées: true (par défaut), faux (pas de fond), "statiques" - toile de fond est présent mais fenêtre modale n'est pas fermé lorsque vous cliquez à l'extérieur de la fenêtre modale.

static peut fonctionner.

12
répondu Chandermani 2013-11-29 13:11:02

configurer globalement,

décorateur , l'une des meilleures fonctionnalités dans angulaire. donne la possibilité de "patch" modules tiers.

disons que vous voulez ce comportement dans tout votre $modal références et vous ne voulez pas changer vos appels,

Vous pouvez écrire un décorateur . que 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

6
répondu Jossef Harush 2016-08-15 14:46:50

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

closeByEscape : false
closeByDocument : false
5
répondu Ben Cohen 2016-02-01 09:07:12