单击背景时如何关闭离子弹出窗口

Question

当我点击离子背景时,如何让我的弹出窗口关闭.这是我的代码.我是离子和角度js的新手.下面的代码允许我打开一个弹出窗口,当我点击按钮时,我弹出了弹出窗口.我想这样做,因为当我点击背景它应该让我到主页.

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

 };

如何修改我的代码才能实现这一目标？

Answer 1

有时模态不是我们想要的.模态将在移动屏幕上显示整个屏幕.

因此,我创建了一个服务,可以通过单击背景关闭弹出窗口并将其提供给Github:https: //github.com/mvidailhet/ionic-close-popup

为了让那些想要这个功能的人更容易,我在凉亭注册表中提供了它.

用Bower安装:

$ bower install ionic-close-popup

在应用程序的依赖项中包含ionic.closePopup模块:

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

将新创建的弹出窗口注册到closePopupService服务:

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

这是一个显示实时代码的Codepen:http://codepen.io/mvidailhet/pen/JYwYEE

Answer 2

如果您想在点击背景时关闭用户界面，请使用模式而不是弹出窗口。希望这能解决您的问题。

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