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


Réponses:


193

Lors de la création de votre modal, vous pouvez spécifier son comportement:

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

2
Oui, c'est la bonne réponse :) Merci de la partager!
skywalker

Cool! Merci d'avoir partagé. +1
Khanh Tran

10
Existe-t-il un moyen de les définir dynamiquement - disons si la fenêtre contextuelle est au milieu d'une opération qui ne devrait pas être interrompue?
RonLugge


23

Ancienne question, mais si vous souhaitez ajouter des boîtes de dialogue de confirmation sur diverses actions de fermeture, 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 du mien, qui déclenche l'action "annuler". Cliquer 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 clôture.


Comment répond-il à ma question?
Rahul Prasad

Avec cela, vous pouvez intercepter si un modal a été chargé de fermer, par la raison de l'instruction. Sur cette base, vous ajoutez une logique personnalisée si vous le souhaitez, ou peut-être invitez l'utilisateur à confirmer avant de fermer réellement le modal.
Tiago

Comme question posée, dites-moi une logique, qui empêchera modal de se fermer?
Rahul Prasad

Si c'est tout ce que vous voulez, utilisez simplement event.preventDefault();inside case "backdrop click"et revenez pour terminer l'exécution.
Tiago

5
+1. C'est en fait un bien meilleur moyen d'empêcher la fermeture du mode modal sans limiter les fonctionnalités (fond d'écran et déclencheurs au clavier). Remarque: l'événement est diffusé et doit donc être écouté sur la portée uibModalInstance ou sur les portées en aval. À partir de 0.13: a5a82d9
Sergej Popov

13

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

static peut fonctionner.


Existe-t-il une option pour qu'aucune toile de fond ne s'affiche et que la fenêtre modale se ferme lorsque vous cliquez en dehors de la fenêtre modale?

8

Configurer globalement,

décorateur , l' une des meilleures caractéristiques angulaires. donne la possibilité de «patcher» des modules tiers.

Disons que vous voulez ce comportement dans toutes vos $modalréférences et que vous ne voulez pas changer 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;
    })
});
  • Remarque: dans les dernières versions, le $modalrenommé en$uibModal

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


5

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

closeByEscape : false
closeByDocument : false
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.