How to make an ion popup close when you click on the background

Question

How can I close the popup when I click on backgroud in ionic form. This is my code. I am new to ionic and angular js. The code below allows me to open a popup, and when I click the buttons I made, the popup closes. I want to do this as if I clicked on the background, it should have taken 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 change my code to make this happen?

Answer 1

If you want to close ui when clicking the background, use the popup menu instead of the mod instead. Hope this solves your problem.

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

Answer 2

Sometimes modality is not what we want. Modal will display full screen on mobile screens.

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

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

Install it using Bower:

 $ bower install ionic-close-popup 

Turn on the ionic.closePopup module depending on your application:

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

Register your newly created popup in closePopupService:

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

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