How do I prevent angular-ui modal from closing?

Question

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

I don't want user to close the modal by pressing on backdrop. I want a modal can only be closed by pressing close button which I have created.

How do I prevent modal from closing ?

score 200 · Accepted Answer · edited Mar 18 '16 at 12:16

200

While you creating your modal you can specify its behavior:

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

edited Mar 18 '16 at 12:16

mauris

42,982
15
99
131

answered Nov 29 '13 at 13:29

artur grzesiak

20,230
5
46
56

11

Is there any way to set these dynamically -- say if the popup is in the middle of an operation that shouldn't be interrupted? – RonLugge Nov 28 '15 at 01:04

score 37 · Answer 2 · edited May 23 '17 at 12:03

37

backdrop : 'static'

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

keyboard :false

to prevent popup close by "Esc" key.

Thanks to pkozlowski.opensource for answer.

I think question is duplicate of Angular UI Bootstrap Modal - how to prevent user interaction

edited May 23 '17 at 12:03

Community

1
1

answered May 26 '15 at 10:20

Sachin G.

1,870
19
24

Tiago · Answer 3 · 2016-03-16T11:54:25.647

23

Old question, but if you want to add confirmation dialogs on various close 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 on the top right of mine, which triggers the "cancel" action. Clicking on the backdrop (if enabled), triggers the cancel action. You can use that to use different messages for various close events.

edited Mar 16 '16 at 11:54

answered Mar 16 '16 at 11:45

Tiago

1,984
1
21
43

How does it answer my question ? – Rahul Prasad Apr 12 '16 at 17:38
With this you can intercept if a modal has been instructed to close, by the reason for the instruction. Based on that you add custom logic if desired, or perhaps prompt the user for confirmation before actually closing the modal. – Tiago Apr 13 '16 at 16:07
As question stated, Tell me a logic, which will prevent modal from closing ? – Rahul Prasad Apr 16 '16 at 12:39
If that's all you want, then just use `event.preventDefault();` inside `case "backdrop click"` and return to end the execution. – Tiago Apr 17 '16 at 12:16
5

+1. This is actually a much better way to prevent modal from closing without limiting features (backdrop & keyboard triggers). Note: event is **broadcasted** so must be listened on uibModalInstance scope or downstream scopes. As of 0.13: [a5a82d9](https://github.com/angular-ui/bootstrap/commit/a5a82d9be7dc0bd1cfd510bacf9aa411c6efe1bc) – Sergej Popov Apr 26 '16 at 08:20

score 13 · Answer 4 · answered Nov 29 '13 at 13:11

13

This is what is mentioned in documentation

backdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.

static may work.

answered Nov 29 '13 at 13:11

Chandermani

42,589
12
85
88

Is there any option so that no backdrop should display and modal window should get closed when clicking outside of the modal window? – Feb 04 '15 at 10:54

score 8 · Answer 5 · edited Jun 20 '20 at 09:12

Configure globally,

decorator, one of the best features in angular. gives the ability to "patch" 3rd party modules.

Let's say you want this behavior in all of your $modal references and you don't want to change your calls,

You can write a decorator. that simply adds to 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 the latest versions, the $modal renamed to $uibModal

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

score 5 · Answer 6 · answered Feb 01 '16 at 09:07

5

for the new version of ngDialog (0.5.6), use:

closeByEscape : false
closeByDocument : false

answered Feb 01 '16 at 09:07

Ben Cohen

64
2
6

How do I prevent angular-ui modal from closing?

6 Answers6

Configure globally,

Linked