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