ionic-Modal 原

假如在contact.html页面上点击弹出模态框

假如在contact.html页面上点击弹出模态框 首先在html页面上加click事件

<button  (click)="openRegisterPage()" outline>你还没有账户，请注册</button>

然后在contact.ts页面引入

import {NavController,LoadingController,AlertController,ToastController,ModalController } from 'ionic-angular'; import {Register} from '../contact/register';//注册页面 并在构造函数中写 constructor( public modalCtrl: ModalController) {}

写点击的事件显示模态框

  openRegisterPage(){     let modal = this.modalCtrl.create(Register);     modal.present();   }

新建register.html  及 register.ts  页面

register.ts 里面引入 import {Component} from '@angular/core'; @Component({   templateUrl: 'build/pages/contact/register.html' }) export class Register {}

register.html页面中添加标签

<ion-content padding>     pages </ion-content>

下面是关闭按钮使用 在注册页面中点击关闭 HTML页面 <ion-toolbar>     <ion-title>用户注册</ion-title>     <ion-buttons start>         <button (click)="dismiss()">取消</button>     </ion-buttons> </ion-toolbar> <ion-content padding></ion-content> ts页面 首先引入ViewController import {ViewController} from 'ionic-angular'; 然后 export class Register {     constructor(public viewCtrl: ViewController) {}     dismiss(){          this.viewCtrl.dismiss();     } } 

(adsbygoogle = window.adsbygoogle || []).push({});