3

I am using Angular UI Bootstrap modal (ui.bootstrap.dialog) and I have backdrop: true & backdropClick: true.

But when user clicks away from the modal, I want to perform not only close but additional functions.

I was looking at the source code thinking I could overwrite Dialog.prototype._bindEvents but have not had any luck doing it.

I also think this might be 'hidden' event in original bootstrap modal, but I was not able to catch this event.

Is there a way to do define a function to execute on backdrop click, and how would one go about it.

Thanks --MB

5 Answers 5

3

I know this is an old question, but since I got here and found a solution later...

You can watch the 'modal.closing' event, broadcasted to the modal's scope, like this:

.controller('modalCtrl', function($scope, $modalInstance) {

  $scope.$on('modal.closing', function(event, reason, closed) {
      console.log('reason: ', reason);
  });
})

The second parameter is the reason (whatever is passed to the $close() method). The reason when clicking the backdrop is backdrop click

Here a working plunker

Sign up to request clarification or add additional context in comments.

1 Comment

I found this useful so thank you for adding to this old question.
1

The dialog class is being rewritten right now, but for a quick and dirty you can modify the options object to receive a function to be called on close and in the close prototype, call that function if it isn't null:

Note the closeFn

var defaults = {
    backdrop: true,
    dialogClass: 'modal',
    backdropClass: 'modal-backdrop',
    transitionClass: 'fade',
    triggerClass: 'in',
    resolve:{},
    closeFn:null,  // added with null default
    backdropFade: false,
    dialogFade:false,
    keyboard: true, // close with esc key
    backdropClick: true // only in conjunction with backdrop=true
    /* other options: template, templateUrl, controller */
  };

In the close prototype:

if (self.options.closeFn!==null) {
   self.options.closeFn();   
}

Controller:

 function doSomething() {
    alert('something');
  }

  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    template:  t, // OR: templateUrl: 'path/to/view.html',
    controller: 'TestDialogController',
    closeFn: doSomething
  };

I mocked this up here: http://plnkr.co/edit/iBhmRHWMdrlQr4q5d1lH?p=preview

3 Comments

Hi lucuma, thanks for the reply. I tried to do something without changing original code - please check out the answer above? I think it's easier to implement then yours, but I am not sure if I am missing something. Thanks.
That's fine too, mine executes whether you click on the backdrop or the button gets closed by the escape key or by the button (from the controller) but I guess that might not be exactly what you want.
On backdrop click modal close automatically. Can we restrict a user that when click on backdrop, the modal should not close?
1

You can watch the scope destory event in the modal:

$scope.$on('$destroy', function () {});

Or resolve the dismiss promise in your modal and chain up a new one passed through DI.

When creating the modal inject a defer object (never the promise):

var close = $q.defer();
var modalInstance = $modal.open({
    ...
    closePromise: function () {
        return close;
    }
});

close.promise.then(function ( someData ) {
    // On every modal close
});

And in the modal:

//                         resolve       dismiss
$modalInstance.result.then(angular.noop, function () {
    closePromise.resolve( someData );
});

Comments

1

You can use

backdrop: 'static'

in your options. Like this:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});

1 Comment

Thank you! This helped me so much... I was ready to change angular's source but it was already done.
0

What about over writing my_dlg.handleBackDropClick?

1 Comment

The angular ui team is rewriting the dialog controller. I doubt you'd be hurting yourself too much by messing with the source since I'd expect the new version to be a lot different. Anyways do what works for you in your specific case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.