jquery - 如何在点击背景时关闭 ionic 弹出窗口

标签 jquery angularjs popup ionic-framework

当我点击 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);
 });

 };

我如何修改我的代码来实现这一点?

最佳答案

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

所以我创建了一个服务,可以通过单击背景来关闭弹出窗口,并在 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

关于jquery - 如何在点击背景时关闭 ionic 弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28496586/

相关文章:

javascript - 发布后未到达 .then()

json - 无法将事件/弹出窗口绑定(bind)到现有传单 geojson 层

javascript - 为什么我将 JQuery/CSS 代码导入到我的 Wordpress 网站时它不起作用?

jquery - 检索选中的复选框的值

javascript - 谷歌地图 API v3 : Initial View is Fine but Gray Box with No Map if View is changed

angularjs - Chrome 无法启动( Protractor 、Ubuntu、 headless )

javascript - 如何在Javascript中打开屏幕坐标外的弹出窗口

jquery - 尝试访问 poplight 弹出窗口中的其他变量

javascript - 使用 Javascript 更改 SVG 的颜色

javascript - jquery 仅在静态和动态元素上触发事件一次