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

如果你想关闭背景的ui，那么使用modal而不是popup。希望这能解决你的问题。

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

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

2 个答案: