Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

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

share|improve this question

5 Answers 5

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

share|improve this answer

You can use

backdrop: 'static'

in your options. Like this:

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    backdrop: 'static',
    ...
});
share|improve this answer
    
Thank you! This helped me so much... I was ready to change angular's source but it was already done. – DomenicDatti Oct 12 at 20:01

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 );
});
share|improve this answer

What about over writing my_dlg.handleBackDropClick?

share|improve this answer
    
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. – lucuma May 17 '13 at 23:59

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

share|improve this answer
    
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. – Massive Boisson May 17 '13 at 22:29
    
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. – lucuma May 17 '13 at 22:31
    
On backdrop click modal close automatically. Can we restrict a user that when click on backdrop, the modal should not close? – Jeeva Jsb Sep 23 at 12:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.