How To Catch Backdrop Click Event When Clicked Out Of Angular Ui Bootstrap Modal?

In my application, it is using $modal.open() function to open a modal popup which is using another page as a template. While clicking the button, it is showing the modal popup fine

Solution 1:

$modal.open() returns a object with a promise. You can use the promise and chain it though, and handle it in the catch. When you click on the backdrop outside, it does a dismiss internally and it rejects the promise.

ex:-

var instance = $modal.open(...);

 instance.result.then(function(){
  //Get triggers when modal is closed
 }, function(){
  //gets triggers when modal is dismissed.
 });

If you are using this in the child where $modalInstance is injected you could do that there as well. So basically rather than dealing with event this helps you do it at a higher level with the help of promises.

Solution 2:

You can use

backdrop:'static'

in your options. Like this:

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

The Bootstrap 3.0 Documentation explains that backdrop: 'static' specifies a backdrop that doesn't dismiss the modal on click.

Solution 3:

Catch all clicks on the html document, and close the modal.

Catch clicks inside the modal and stop the propagation.

i.e.

$("html").on("click",closemodal());

$(".modal").on("click",function(event){
   event.stopPropagation();
}

Solution 4:

I had this same problem with the Angular Mobile UI Demo (1.2), however in the demo files the modal is not declared in the main JS.

Instead, just adding two more variables to the in modal1.html did the trick.

<div class="modal-dialog" ui-outer-click="Ui.turnOff('modal1')" ui-outer-click-if="Ui.active('modal1')">

This is explained here: http://mobileangularui.com/docs/#outer-click

Both properties are needed for it to work.