$ionicPopup
See the Pen by
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();
return $scope.data.wifi;
myPopup.then(function(res) {
console.log('Tapped!', res);
$timeout(function() {
myPopup.close(); //由于某种原因3秒后关闭弹出
// 一个确认对话框
$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) {
console.log('You are sure');
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');
show(可选)
显示一个复杂的对话框。 这是一个所有弹窗的主体显示功能。
一个带有按钮组的复杂弹窗，每个按钮带有一个文本 和 类型字段，此外还有一个 onTap功能。当点击弹窗上的相关按钮，会触发onTap函数，默认会关闭弹窗，处理弹窗的返回值。如果你想阻止默认动作，点击按钮保持打开弹窗，当点击一个事件时，触发event.preventDefault()。详见下文。
新弹窗的选项的表现形式：
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的子标题。
template: '', // String (可选)。放在弹窗body内的html模板。
templateUrl: '', // String (可选)。在弹窗body内的html模板的URL。
scope: null, // Scope (可选)。一个链接到弹窗内容的scope（作用域）。
buttons: [{ //Array[Object] (可选)。放在弹窗footer内的按钮。
text: 'Cancel',
type: 'button-default',
onTap: function(e) {
// 当点击时，e.preventDefault() 会阻止弹窗关闭。
e.preventDefault();
text: 'OK',
type: 'button-positive',
onTap: function(e) {
// 返回的值会导致处理给定的值。
return scope.data.
object 当关闭弹窗时，处理一个promise。有一个附加的关闭函数，用于利用程序关闭弹窗。
alert(可选)
显示一个带有一段信息和一个用户可以点击关闭弹窗的按钮的简单提示弹窗。
显示提示的选项形式：
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的子标题。
template: '', // String (可选)。放在弹窗body内的html模板。
templateUrl: '', // String (可选)。 放在弹窗body内的html模板的URL。
okText: '', // String (默认: 'OK')。OK按钮的文字。
okType: '', // String (默认: 'button-positive')。OK按钮的类型。
object 当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。
confirm(可选)
显示一个简单的带有一个取消和OK按钮的对话框弹窗。
如果用户点击OK按钮，就设置promise为true，如果用户点击取消按钮则为false。
显示对话框弹窗选项的形式：
title: '', // String. 弹窗标题。
subTitle: '', // String (可选)。弹窗的副标题。
template: '', // String (可选)。放在弹窗body内的html模板。
templateUrl: '', // String (可选)。放在弹窗body内的一个html模板的URL。
cancelText: '', // String (默认: 'Cancel')。一个取消按钮的文字。
cancelType: '', // String (默认: 'button-default')。取消按钮的类型。
okText: '', // String (默认: 'OK')。OK按钮的文字。
okType: '', // String (默认: 'button-positive')。OK按钮的类型。
object 当关闭对话框时，处理的一个promise。当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。
prompt(可选)
显示一个简单的提示弹窗，带有一个input， OK 按钮，和取消按钮。如果用户点击OK，就设置promise的值，如果用户点击取消，则值为未定义。
$ionicPopup.prompt({
title: 'Password Check',
template: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password'
}).then(function(res) {
console.log('Your password is', res);
显示的提示弹窗选项的形式：
title: '', // String. 弹窗的标题。
subTitle: '', // String (可选)。弹窗的副标题。
template: '', // String (可选)。放在弹窗body内的html模板。
templateUrl: '', // String (可选)。放在弹窗body内的html模板的URL。
inputType: // String (默认: 'text')。input的类型。
inputPlaceholder: // String (默认: '')。input的 placeholder。
cancelText: // String (默认: 'Cancel')。取消按钮的文字。
cancelType: // String (默认: 'button-default')。取消按钮的类型。
okText: // String (默认: 'OK')。OK按钮的文字。
okType: // String (默认: 'button-positive')。OK按钮的类型。
object 当关闭对话框时，处理的一个promise。当弹窗关闭时，处理的一个 promise。有一个额外的关闭函数，可以被带有任何给定的值的关闭程序调用。能不能讲下ionic调用安卓返回键的问题呢，ionic文档上的返回键只是退出界面，并不能退出应用，能不能每次退出再打开都能见到启动页？还有cordova的启动页能做成像原生那样的动画吗？比如向左侧滑动关闭，不要duang的一下就闪没了，然后主页面也以向左滑动的形式展示？谢谢老师！为了提这个问题，特意开了一年会员啊~~~~
谁能回答下我的问题啊，？？？？？？？？？？？？？？？？？
@ 已经在进行中 你的问题我会在课程中解决一下。注意留意。
AngularJS 之移动 A...Ionic中[弹出式窗口]有两种（如下图所示），$ionicModal和$ionicP
$ionicModal是完整的页面；
$ionicPopup是(Dialog)对话框样式的，直接用JavaScript设定对话框的一些参数，通常用于通知消息、确认等作用；
本文主要介绍IonicModal的使用方法
中文文档：http://ionicframework.net/docs/api/service/$ionicModal/
英文文档：/docs/api/service/$ionicModal/
$ionicModal（中文翻译为&模型&，感觉还是直接称为用Modal好一点。）
模型是一个内容面板，可以临时越过用户的主视图。通常用于选择或编辑一个项。注意，你需要把模型的内容放入一个带有modal类的div内。
举个例子，啥是Modal？：
登录或者注册页面的用户协议（图1），点击&用户协议&之后，会弹出用户协议具体内容（图2），这个地方就可以使用Modal来实现。图3中展示了Application运行起来之后，登录页面的源代码（这些都是ionic自己生成的），忽略其他信息，只看我标出来的红色1和红色2，当前红色2的元素是hide，当我们点击&用户协议&之后，红色2就会从&hide&变成&actived&，这时候我们就看到了图2的内容了。
图1 登录界面用户协议
图2 用户协议具体内容（Modal）
图3 查看网页源代码
如何实现Modal？
首先要有自己Modal的html代码，注意，你需要把模型的内容放入一个带有modal类的div内。：
&script id="my-modal.html" type="text/ng-template"&
&div class="modal"&
&ion-header-bar&
&h1 class="title"&我的模型标题&/h1&
&/ion-header-bar&
&ion-content&
&/ion-content&
然后写自己的js代码（其实就是AngularJS代码）
这部分需要注意以下几点：
（1）不要忘了function的参数$ionicModal，否则会报错（用浏览器的调试工具F12可以看到）
（2）使用fromTemplateUrl将HTML代码中script（根据id）在HTML页面生成自己的Modal（也就是说，在打开页面的时候，是没有图3中的红色2 div的，当调用了fromTemplateUrl之后，才会生成这个div，而且每调用一次就会生成一个红色2 div哦，所以写代码的时候要把逻辑设计好，注意及时remove()。）；
（3）openModal和closeModal函数很容易理解，这个估计是Modal最常用的方法；
（4）可以通过$scope.$on来进行更丰富的操作（当然，不用$scope.$on也可以进行丰富的操作。）；
1 angular.module('testApp', ['ionic'])
2 .controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal =
$scope.openModal = function() {
$scope.modal.show();
$scope.closeModal = function() {
$scope.modal.hide();
//当我们用完模型时，清除它！
$scope.$on('$destroy', function() {
$scope.modal.remove();
// 当隐藏模型时执行动作
$scope.$on('modal.hide', function() {
// 执行动作
// 当移动模型时执行动作
$scope.$on('modal.removed', function() {
// 执行动作
详细说说创建的方法
可以使用字符串或者一个URL：
fromTemplate(templateString, options)
templateString& 是字符串类型，存储的是模型的内容；
options是一个对象，存储的是方法的选项；
返回一个Modal控制器实例；
一个options对象具有一下属性：
{object=} 范围 子类的范围。默认：创建一个$rootScope子类。
{string=} 动画 带有显示或隐藏的动画。默认：'slide-in-up'
{boolean=} 第一个输入框获取焦点 当显示时，模型的第一个输入元素是否自动获取焦点。默认：false。
{boolean=}backdropClickToClose` 点击背景时是否关闭模型。默认：true。
fromTemplateUrl(templateUrl, options)
templateUrl 是字符串类型，指向待加载模版的URL；
options与上边的一样；
返回一个promise对象，指向一个Modal控制器实例；
&更直观一点的使用url创建：
1 $ionicModal.fromTemplateUrl('templates/hello.html', {// modal窗口选项
scope: $scope,
animation: 'silde-in-up'
4 }).then(function (modal) {
$scope.modal =
templates目录下hello.html内容如下：
1 &ion-modal-view&
&ion-header-bar class="bar-energized"&
&h1 class="title"&标题&/h1&
&/ion-header-bar&
&ion-content&
&/ion-content&
8 &/ion-modal-view&
参考链接（这篇文章写的内容比较多，初学者不容易看懂）：http://hybridap.blogspot.sg/2015/04/hybrid-apps52ionicmodal.html
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
注册返回键事件 按了返回键不触发$ionicPlatform.registerBackButtonAction(function(e) {
alert("test");
而ready()是OK的$ionicPlatform.ready(function() {alert("test2");});
似乎打包成安卓APP之后是可行的
但在浏览器中运行还是不行
在浏览器中监听不到物理返回键
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为这个是用cordova插件方式通过监听安卓原生的返回键触发事件，回调$ionicPlatform.registerBackButtonAction方法的，所以才在浏览器中没有反应
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：ionic2/ionic3监听安卓手机返回键 - 推酷
ionic2/ionic3监听安卓手机返回键
想在安卓手机上实现两次点击返回键才退出程序，花了两天时间终于完美解决，下面放代码。
下面方法可以在ponent.ts中的构造方法中调用
代码段一：
initializeApp() {
this.platform.ready().then(() =& {
this.registerBackButtonAction();
代码段二：
registerBackButtonAction() {
this.platform.registerBackButtonAction(() =& {
if (this.keyboard.isOpen()) {
this.keyboard.close();
const overlay = this.app._appRoot._overlayPortal.getActive();
if(overlay && overlay.dismiss) {
overlay.dismiss();
const nav = this.app.getActiveNav();
let activeVC = nav.getActive();
let page = activeVC.
// console.log(page);
if (page instanceof IonTabsPage) {
this.app.goBack();
if(nav.canGoBack()){
nav.pop();
this.showExit();
代码段三：
//双击退出提示框
backButtonPressed: boolean =
showExit() {
if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
this.platform.exitApp();
this.showToast('再按一次退出应用');
this.backButtonPressed =
setTimeout(() =& { //2秒内没有再次点击返回则将触发标志标记为false
this.backButtonPressed =
我的项目比较特殊，首页是一个ion-menu，首页点击某个按钮会进入一个ion-tabs构造的页面，暂且叫它IonTabsPage。网上也找了一些关于监听的代码，确实可以，但是一到IonTabsPage页面就无法返回，也就是canGoBack()总是返回false，截止到写这篇博客我还不了解为什么总是返回false。无奈之下只能去判断page，原先代码段二不是那样写的，尤其是
nav.getActive();
//这里的nav我用的是
@ViewChild(Nav) nav: N
这就导致我无法正确的判断类型（instanceof），今天灵光一闪，结合在
这里看到看到的资料，修改成了代码段二那样，另外注意在IonTabsPage里面不能用nav.pop()来返回，只能用this.app.goBack()，这也是逛论坛无意中看到的。
上面的app，platform，keyboard按如下方式引入
import { App, Keyboard } from 'ionic-angular';
constructor(private app: App, private keyboard: Keyboard) {
记录下这一研究结果，给需要的人。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致