How to prevent the closure of angular -ui modal?

Question

I am using Angular UI $ modal in my project http://angular-ui.imtqy.com/bootstrap/#/modal

I do not want the user to close the modal mode by clicking on the background. I want the modal function to be closed only by pressing the close button that I created.

How to prevent a modal file from closing?

Answer 1

While you are creating your modal, you can specify its behavior:

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

Answer 2

 backdrop : 'static' 

Will work for 'click' events, but you can use the Esc key to close the popup.

 keyboard :false 

to prevent popup closing with Esc.

Thanks pkozlowski.opensource for the answer.

I think the question is duplicated by Angular UI Bootstrap Modal - how to prevent user interaction

Answer 3

This is what is mentioned in the documentation.

Background

- controls the presence of the background. Valid values: true (default), false (no background), "static" - background, but the modal window does not close when clicked outside the modal window.

static can work.

Answer 4

An old question, but if you want to add confirmation dialogs for various closing actions, add this to your modal instance controller:

 $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(); } }); 

I have a close button in the upper right corner of mine, which triggers the cancel action. Clicking on the background (if enabled) triggers the undo action. You can use this to use different messages for different closing events.

Answer 5

for the new version of ngDialog (0.5.6) use:

 closeByEscape : false closeByDocument : false 

Answer 6

Configure globally

decorator , one of the best features in angular. makes it possible to "fix" third-party modules.

Say you want this behavior in all of your $modal links , and you don't want to change your calls,

You can write a decorator . which just adds to the 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: in recent versions $modal renamed to $uibModal

Online demo - http://plnkr.co/edit/2MWIpOs3uAG5EFQy6Ndn?p=preview