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 ?
6 réponses
pendant que vous créez votre modal vous pouvez spécifier son comportement:
$modal.open({
// ... other options
backdrop : 'static',
keyboard : false
});
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
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.
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.
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
pour la nouvelle version de ngDialog (0.5.6), utiliser:
closeByEscape : false
closeByDocument : false