web-dev-qa-db-fra.com

Comment puis-je empêcher la fermeture du modal angular-ui?

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 toile de fond. Je veux un modal ne peut être fermé qu'en appuyant sur le bouton de fermeture que j'ai créé.

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

angularjsangular-uiangularjs-service
82
Rahul Prasad

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

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

Cela fonctionnera pour les événements de "clic" mais vous pourrez quand même utiliser la touche "Echap" pour fermer la fenêtre contextuelle.

keyboard :false

pour empêcher la fermeture de popup par la touche "Esc".

Merci à pkozlowski.opensource pour sa réponse.

Je pense que la question est une copie de Interface utilisateur angulaire Bootstrap Modal - Comment éviter les interactions de l'utilisateur)

31
Sachin G.

Ancienne question, mais si vous souhaitez ajouter des boîtes de dialogue de confirmation pour diverses actions de fermeture, ajoutez ceci à 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 du mien, ce qui déclenche l'action "annuler". Un clic sur le fond (s'il est activé) déclenche l'action d'annulation. Vous pouvez l'utiliser pour utiliser différents messages pour divers événements de fermeture.

21
Tiago

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), false (pas de fond), 'statique' - le fond est présent, mais la fenêtre modale n'est pas fermée lorsque vous cliquez en dehors de la fenêtre modale.

static peut fonctionner.

12
Chandermani

Configurer globalement,

décorateur , une des meilleures caractéristiques angulaires. donne la possibilité de "patch" Modules tiers.

Supposons que vous souhaitiez ce comportement dans tous vos $modal références et vous ne souhaitez pas modifier vos appels,

Vous pouvez écrire un décorateur . cela 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;
    })
});
  • Remarque: dans les dernières versions, le $modal renommé en $uibModal

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

8
Jossef Harush

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

closeByEscape : false
closeByDocument : false
5
Ben Cohen