Ionic Directive to allow closing a popup when tapping on the background

cordova, phonegap, android, ios, ionic, directive, popup, hack, workaround

By Mitch , 30 November 2015

In my last project, my client wanted to be able to close a popup by tapping outside of it's bounds. So I made a directive to do exactly that and as it was a bit tricky to do that, I thought I could share it with the community. Here is what it looks like in action:


Do we need it? Yeah!!

Mike Hartington said in a thread on the subject, this behavior kind of defeat the purpose of popup. BUT, in some cases, it can totally be logical.

The best example I know is the calendar popup in the awesome Sunrise app. As you can see on the screenshot below, if you want to cancel you choice of date, you just tap outside of the popup. It lightens the interface by removing a Cancel button and it feels as natural.


When do we need it? Now!!

So without further presentation, here is my awesome-ionic-close-freaking-popup-when-tap-background-or-die-trying directive. I renamed it ionic-close-popup for convenience.

Here is the Github page: https://github.com/mvidailhet/ionic-close-popup

Installation

The installation process is pretty straight forward.

Install it with bower (or copy the file if you don't use Bower):

$ bower install ionic-close-popup

Include the ionic.closePopup module in your app's dependencies:

angular.module('app', ['ionic', 'ionic.closePopup'])

Usage

Register your newly created popup to the closePopupService service :

var alertPopup = $ionicPopup.alert({
      title: 'Alert popup',
      template: 'Tap outside it to close it'
    });
    IonicClosePopupService.register(alertPopup);

That's it! Your popup will close if you tap outside of it.

I hope you enjoyed this article and found it useful. I’d love to hear about your thought about it in the comment section. Thanks for reading! And may code be with you.