How to prevent Angular-UI bootstrap modal closing?

Question

I do have a $modalInstance. I can receive close event notification with the help of the promises:

$modalInstance.result.finally(function() {
  // code here
});

But I don't know how to prevent closing if user closes the model by mistake. I want to ask user if one really wants to close the model and close it if he does. Still I don't want to enable backdrop: 'static':

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

Thank you.

When you close the modal like that an event fires, it seems to me like you can work with that somehow, I think this question can help you: http://stackoverflow.com/questions/30356844/angularjs-bootstrap-modal-closing-call-when-clicking-outside-esc — sch, Oct 06 '15 at 09:42
I don't think there is a need of using boostrap's modal. You can simply create a div/form with z-index greater than zero. And use ng-hide/ng-show as required to make hide/visible. — SaiGiridhar, Oct 06 '15 at 10:07
@SaiGiridhar well, I have to use it in project it is a requirement. Last time I did modal it was VanillaJS only :) — Georgy, Oct 06 '15 at 10:15
@user3266024 I don't see the answer after looking trough, will read the answers carefully later, thank you. — Georgy, Oct 06 '15 at 10:17

score 2 · Answer 1 · edited May 23 '17 at 12:08

I did some more research, and I found another question similar to this one, this is the answer found on that question (feel free to +1 him, and not me)

    $scope.$on('modal.closing', function(event, reason, closed) {
    var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");

    if (r !== 'YES') {
        event.preventDefault();
    }
});

Put this inside the modal controller.

This is not exactly what you searched for, this will prompt you if you try to close the modal, by dismiss (clicking outside modal), cancel or ok button. You can try and modify it to suit your needs.

Update: Added simple if else check to see what was clicked, and if backdrop was clicked then prompt the user:

    $scope.$on('modal.closing', function(event, reason, closed) {

    if (reason == 'ok' || reason == 'cancel'){
        console.log('closed');
    } else {
        // this is if 'reason' == 'backdrop click' 
        var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)");

        if (r !== 'YES') {
            event.preventDefault();
        }
    }
});

Do you think this solution is sufficient?

How to prevent Angular-UI bootstrap modal closing?

1 Answers1