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

Question

当我在 ionic 中单击背景时，如何关闭弹出窗口。这是我的代码。我是 ionic 和 angular 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

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

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

Answer 2

有时候模态框并不是我们想要的。模态框将在移动设备屏幕上占据整个屏幕。

所以我制作了一个服务，可以通过单击背景来关闭弹出窗口，并使其在 Github 上可用： https://github.com/mvidailhet/ionic-close-popup

为了方便需要此功能的人使用，我在 Bower 注册表中提供了它。

使用 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

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

How to make ionic popup close when click on background

jquery

popup

angularjs

ionic