How to make ionic popup close when click on background

Question

How can i make my popup close when i click on backgroud in ionic. This is my code. I m new to ionic and angular js. The below code allows me to open a popup and when i click on the buttons i have made popup close. I want to make it as when i click on the background it should get me to the home page.

 $scope.showPopup = function() {
   $scope.data = {}
 // An elaborate, custom popup
 var myPopup = $ionicPopup.show({

 title: 'Social Media Services',

 scope: $scope,
 buttons: [
 { 
 type :'ion-social-facebook positive button-large',

     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
        window.open('https://www.facebook.com/BinDawood.Co', '_system', 'location=yes');
     }
   },
   { type :'ion-social-twitter calm',
     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
        window.open('https://twitter.com/BinDawoodco', '_system', 'location=yes');
     }
   },
   {  type :'ion-social-pinterest assertive',
     onTap: function(e) {
     // $cordovaSpinnerDialog.show("aaa", "aaaa");
         window.open('http://pinterest.com/bindawoodco', '_system', 'location=yes');
     }
   },

 ]
 });
 myPopup.then(function(res) {
  console.log('Tapped!', res);
 });

 };

How can i modify my code to make this happen?

Answer 1

Sometimes a modal is not what we want. A modal will take the whole screen on mobile screens.

So I made a Service to be able to close a popup by clicking on the background and made it available on Github: https://github.com/mvidailhet/ionic-close-popup

To make things easier for people who would want this feature, I made it available in the bower registry.

Install it with Bower:

$ bower install ionic-close-popup

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

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

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);

Here is a Codepen showing a live code: http://codepen.io/mvidailhet/pen/JYwYEE

Answer 2

If you want to close the ui on tap of background, then use modal instead of popup. Hope this would solve your problem.

http://ionicframework.com/docs/api/service/$ionicModal/