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 Backdrop. Je veux qu'un modal ne puisse être fermé qu'en appuyant sur le bouton de fermeture que j'ai créé.
Comment empêcher la fermeture de modal?
angularjs
angular-ui
angularjs-service
Rahul Prasad
la source
la source
backdrop : 'static'
Fonctionnera pour les événements «clic», mais vous pouvez toujours utiliser la touche «Échap» pour fermer la fenêtre contextuelle.
keyboard :false
pour empêcher la fermeture de popup par la touche "Echap".
Merci à pkozlowski.opensource pour la réponse.
Je pense que la question est un double de Angular UI Bootstrap Modal - comment empêcher l'interaction de l'utilisateur
la source
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.
la source
event.preventDefault();
insidecase "backdrop click"
et revenez pour terminer l'exécution.C'est ce qui est mentionné dans la documentation
static
peut fonctionner.la source
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
$modal
ré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; }) });
$modal
renommé en$uibModal
Démo en ligne - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview
la source
pour la nouvelle version de ngDialog (0.5.6), utilisez:
closeByEscape : false closeByDocument : false
la source