Ionic弹窗服务允许程序创建、显示弹出窗口,需要用户继续响应。

弹窗系统支持更多灵活的构建alert()prompt()confirm()功能版本,以及用户习惯,除了允许查看完全自定义内容的的弹窗。

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicPopup, $timeout) { // 触发一个按钮点击,或一些其他目标
$scope.showPopup = function() {
$scope.data = {} // 一个精心制作的自定义弹窗
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//不允许用户关闭,除非他键入wifi密码
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); //由于某种原因3秒后关闭弹出
}, 3000); // 一个确认对话框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
}; // 一个提示对话框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
};
});

原文出处:http://www.ionic.wang/js_doc-index-id-52.html

Ionic 弹出窗的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  2. Bootstrap模态弹出窗

    Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...

  3. jquery Mobile弹出窗

    先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...

  4. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

  5. iOS:弹出窗控制器:UIPopoverController

    弹出窗控制器:UIPopoverController 截图:   实质:就是将内容控制器包装成popoverController的形式,然后在模态出来,必须给定指向目标(target.frame). ...

  6. easyui弹出窗关闭前调用确认窗口,先关闭页面后调用弹出窗口

    弹出窗关闭的时候提示是否关闭,同时进行一些对应的方法调用, 然而在进行页面关闭调用的时候,往往页面关闭了,才弹出确认对话框, $.messager.confirm和panel的onBeforeClos ...

  7. Android应用之——百度地图最新SDK3.0应用,实现最经常使用的标注覆盖物以及弹出窗覆盖物

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yanglfree/article/details/33333413 一.概述 最新版的百度地图SDK ...

  8. data-参数说明(模态弹出窗的使用)

    除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗.比如说:是否有灰色背景modal-b ...

  9. jquery ui dialog弹出窗 清空缓存Cache或强制刷新

    我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...

随机推荐

  1. Tomcat J2ee 发布步骤

    1.找到要发布的工程,并发布到本地tomcat下,测试完全没有问题,找到tomcat下webapps下 并找到该工程,进入该工程目录,全选添加到  drivingSchool.zip 或  drivi ...

  2. 【HDOJ】1239 Calling Extraterrestrial Intelligence Again

    这题wa了很多词,题目本身很简单,把a/b搞反了,半天才检查出来. #include <stdio.h> #include <string.h> #include <ma ...

  3. 查找mysql数据文件存放路径

    show variables like 'datadir%'; show variables当前的会话,是系统参数 是静态 show global variables全局 show status是系统 ...

  4. 基于B/S模式的推送

    基于B/S模式的推送 https://www.ibm.com/developerworks/cn/web/wa-lo-comet/ 传统模式的 Web 系统以客户端发出请求.服务器端响应的方式工作.这 ...

  5. 通过 Azure Media Encoder 降低编码成本

    John Deutscher  Azure 媒体服务首席项目经理 正如在我们的定价页面上宣布的那样,我们引入了一种只根据输出千兆字节数收取编码费用的全新定价模型.之前的/传统模型是根据输入和输出千兆字 ...

  6. 生成AWK快照的方法

    1.首先在用oracle用户登陆执行sqlplus命令用dba用户执行: exec DBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT (flush_level=> ...

  7. 现代Web的资源/类型/元素--发展趋势

    5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册.伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册. 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译 ...

  8. jQuery技术内幕预览版.pdf3

    jQuery.fn.init(selector,context,rootjQuery):构造函数 jQuery.fn.init() 负责解析参数 selector 和 context 的类型,并执行相 ...

  9. [LeetCode] 42. Trapping Rain Water 解题思路

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  10. Java 8 简明教程

    欢迎阅读我编写的 Java 8 介绍.本教程将带领你一步步认识这门语言的所有新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,Lambda表达式,方法引用和可重复注解.在这篇教程的最后 ...