Ionic 弹出窗
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 弹出窗的更多相关文章
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- Bootstrap模态弹出窗
Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...
- jquery Mobile弹出窗
先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...
- iOS:模态弹出窗控制器UIPopoverPresentationController
模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...
- iOS:弹出窗控制器:UIPopoverController
弹出窗控制器:UIPopoverController 截图: 实质:就是将内容控制器包装成popoverController的形式,然后在模态出来,必须给定指向目标(target.frame). ...
- easyui弹出窗关闭前调用确认窗口,先关闭页面后调用弹出窗口
弹出窗关闭的时候提示是否关闭,同时进行一些对应的方法调用, 然而在进行页面关闭调用的时候,往往页面关闭了,才弹出确认对话框, $.messager.confirm和panel的onBeforeClos ...
- Android应用之——百度地图最新SDK3.0应用,实现最经常使用的标注覆盖物以及弹出窗覆盖物
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yanglfree/article/details/33333413 一.概述 最新版的百度地图SDK ...
- data-参数说明(模态弹出窗的使用)
除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗.比如说:是否有灰色背景modal-b ...
- jquery ui dialog弹出窗 清空缓存Cache或强制刷新
我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...
随机推荐
- C#简单多线程使用(同步和优先权)
题目: 麦当劳有两个做汉堡的厨师(工号:11,12)和三个销售人员(工号:21,22,23). 厨师生产汉堡,并负责将做好的汉堡放入货架,货架台大小有限,最多放6个汉堡,11和12不能同时往货架台上放 ...
- Codevs_1690_开关灯_(线段树)
描述 http://codevs.cn/problem/1690/ 一排共 n 个灯,起初都是关着的,现在有 m 次操作. 0 开头的操作代表将 l ~ r 的开关按一遍,1 开头的操作代表询问 l ...
- HDOJ --- 1176 免费馅饼
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- 使用VisualStudio进行单元测试之二
借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...
- Firefox添加插件支持修改Headers
安装以下插件,Firefox就可以修改Headers: 安装成功后,会在左下角出现一个这样的图标,点击这个图标就可以随意修改Headers的参数了.
- SQL 判断字段中指定字符出现的次数
原文地址:SQL 判断字段中指定字符出现的次数 原理:将指定字符转换为空,原长度减去转换后的长度就是指定字符的次数. 在做数据处理时遇到一个SQL操作的问题就是有一列关键词字段,字段中包含各种乱七八糟 ...
- 《A First Course in Abstract Algebra with Applications》-chaper1-数论
由于笔者在别的专栏多次介绍过数论,这里在<抽象代数基础教程>的专栏下,对于chaper1数论这一章节介绍的方式不那么“入门”. 首先来介绍一个代数中常用也是非常重要的证明方法:数学归纳法. ...
- 51单片机连接24C02-C语言测试代码
忙了一天多终于透彻了,自己写的不好使,用别人的逐步分析改成自己的,我写得非常简洁易懂. 我总结3点需要注意的地方 1.关闭非IIC通信器件,比如我的开发板SDA和SCL也连接了DS1302,造成干扰会 ...
- Nginx对于图片,js等静态文件的缓存设置
以下是自学it网--中级班上课笔记 网址:www.zixue.it Nginx对于图片,js等静态文件的缓存设置 注:这个缓存是指针对浏览器所做的缓存,不是指服务器端的数据缓存. 主要知识点: loc ...
- MISCONF Redis is configured to save RDB snapshots
今天客户突然反馈用我们的api出现了下面的这个错误 MISCONF Redis is configured to save RDB snapshots, but is currently not ab ...