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();     } }