Come fare chiudere popup ionico quando si fa clic su sfondo

Question

Come posso chiudere il mio popup quando faccio clic su backgroud in ionico. Questo è il mio codice Sono nuovo a j ionico e angolare. Il codice qui sotto mi permette di aprire un popup e quando clicco sui pulsanti ho fatto chiudere il popup. Voglio farlo come quando clicco sullo sfondo dovrebbe portarmi alla 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); 
}); 

}; 

Come posso modificare il mio codice per farlo accadere?

Answer 1

Se si desidera chiudere l'interfaccia utente sfiorando lo sfondo, utilizzare modale anziché popup. Spero che questo risolva il tuo problema.

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

Answer 2

A volte un modale non è quello che vogliamo. Un modale occuperà l'intero schermo su schermi mobili.

così ho fatto un servizio per essere in grado di chiudere un popup facendo clic sullo sfondo e reso disponibile su Github: https://github.com/mvidailhet/ionic-close-popup

Per rendere le cose più facili per le persone che vorrebbero questa funzione, l'ho fatta a disposizione nel registro del bower.

Installarlo con Bower:

$ bower install ionic-close-popup 

includere il modulo ionic.closePopup nel dipendenze del vostro app:

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

Pubblica il tuo pop-up appena creato al servizio closePopupService:

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

Ecco un codice che mostra un codice live: http://codepen.io/mvidailhet/pen/JYwYEE