Close on modal Backdrop

[djds4rce]

How can we achieve closing the modal on modal backdrop click? I tried writing a directive to close the modal on backdrop click but the click event is never triggered. Any Suggestions?

[ajoslin]

Give this a try in a directive:

document.addEventListener('tap', function(event) {
  var target = angular.element(event.target);
  if (target.hasClass('modalbackdrop')) {
    $rootScope.$apply(function() {
      $rootScope.$broadcast('modal-backdrop-click');
    });
  }
});

Then catch that event in your controller.

[djds4rce]

Hey Your code always has the target as HTML if we click on the backdrop. If we click on the modal it will give the proper modal element.

I modified the Example Code Pen to reporduce the same http://codepen.io/anon/pen/pqIba?editors=001

[ajoslin]

I'll wait until Adam commits the new tap refactor, then try this.

[ajoslin]

Added!

[pjavvaji]

I don't want to hide the modal on backdrop click... Is there any attribute to set the flag, whether or not to hide the modal on backdrop click?

[pjavvaji]

I used popup to get the required behavior. Thanks.

[ajoslin]

My bad, I forgot to include the option.

Added.

[ghost]

@ajoslin May I know the option to prevent the modal from hiding when I click the backdrop?

Thanks,
Praveen

[ghost]

@ajoslin Gotacha!!! from your previous comment backdropClickToClose.

Thanks Again :)

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.