Contents

1. สร้างแอพและรัน

[code]
> ionic start modalApp blank
> cd ./modalApp
> ionic g page detail
> ionic serve -l
[/code]

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DetailPage } from '../pages/detail/detail';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    DetailPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    DetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { DetailPage } from '../pages/detail/detail';

@NgModule({

declarations: [

MyApp,

HomePage,

DetailPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

DetailPage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
      <ion-list-header>Hobbits</ion-list-header>
      <a ion-item (click)="openModal({charNum: 0})">Gollum</a>
      <a ion-item (click)="openModal({charNum: 1})">Frodo Baggins</a>
      <a ion-item (click)="openModal({charNum: 2})">Sam</a>
    </ion-list>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-list-header>Hobbits</ion-list-header>

<a ion-item (click)="openModal({charNum: 0})">Gollum</a>

<a ion-item (click)="openModal({charNum: 1})">Frodo Baggins</a>

</ion-list>

</ion-content>

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';

import { DetailPage } from '../detail/detail';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    public modalCtrl: ModalController) {

  }

  openModal(characterNum) {
    let modal = this.modalCtrl.create(DetailPage, characterNum,
      {
        showBackdrop: true,
        cssClass:"my-modal"
      });
    modal.present();
  }    
  
}

import { Component } from '@angular/core';

import { NavController, ModalController } from 'ionic-angular';

import { DetailPage } from '../detail/detail';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController,

public modalCtrl: ModalController) {

}

openModal(characterNum) {

let modal = this.modalCtrl.create(DetailPage, characterNum,

{

showBackdrop: true,

cssClass:"my-modal"

});

modal.present();

}

src/pages/detail/detail.html

<ion-header>
  <ion-navbar>
    <ion-title>Jack</ion-title>
  </ion-navbar>
</ion-header>
    
<ion-content padding>
  <h2>Hello Modal</h2>
  <ion-list>
    <ion-item>
      <ion-avatar item-start>
        <img src="{{character.image}}">
      </ion-avatar>
      <h2>{{character.name}}</h2>
      <p>{{character.quote}}</p>
    </ion-item>
    <ion-item *ngFor="let item of character['items']">
      {{item.title}}
      <ion-note item-end>
        {{item.note}}
      </ion-note>
    </ion-item>
  </ion-list>
  <button ion-button  color="secondary" (click)="dismiss()">Close</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>Jack</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h2>Hello Modal</h2>

<ion-list>

<ion-item>

<ion-avatar item-start>

</ion-avatar>

<h2>{{character.name}}</h2>

<p>{{character.quote}}</p>

</ion-item>

<ion-item *ngFor="let item of character['items']">

<ion-note item-end>

</ion-note>

</ion-item>

</ion-list>

<button ion-button color="secondary" (click)="dismiss()">Close</button>

</ion-content>

src/pages/detail/detail.ts

import { Component } from '@angular/core';
import { IonicPage, Platform, NavParams, ViewController } from 'ionic-angular';

/**
 * Generated class for the DetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {

  character;

  constructor(public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController ) {

      var characters = [
        {
          name: 'Gollum',
          quote: 'Sneaky little hobbitses!',
          image: 'assets/img/avatar-gollum.jpg',
          items: [
            { title: 'Race', note: 'Hobbit' },
            { title: 'Culture', note: 'River Folk' },
            { title: 'Alter Ego', note: 'Smeagol' }
          ]
        },
        {
          name: 'Frodo',
          quote: 'Go back, Sam! I\'m going to Mordor alone!',
          image: 'assets/img/avatar-frodo.jpg',
          items: [
            { title: 'Race', note: 'Hobbit' },
            { title: 'Culture', note: 'Shire Folk' },
            { title: 'Weapon', note: 'Sting' }
          ]
        },
        {
          name: 'Samwise Gamgee',
          quote: 'What we need is a few good taters.',
          image: 'assets/img/avatar-samwise.jpg',
          items: [
            { title: 'Race', note: 'Hobbit' },
            { title: 'Culture', note: 'Shire Folk' },
            { title: 'Nickname', note: 'Sam' }
          ]
        }
      ];
      this.character = characters[this.params.get('charNum')];      
    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailPage');
  }

  dismiss() {
    this.viewCtrl.dismiss();
  }

}

import { Component } from '@angular/core';

import { IonicPage, Platform, NavParams, ViewController } from 'ionic-angular';

/**

* Generated class for the DetailPage page.

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

@IonicPage()

@Component({

selector: 'page-detail',

templateUrl: 'detail.html',

})

export class DetailPage {

character;

constructor(public platform: Platform,

public params: NavParams,

public viewCtrl: ViewController ) {

var characters = [

{

quote: 'Sneaky little hobbitses!',

image: 'assets/img/avatar-gollum.jpg',

items: [

{ title: 'Race', note: 'Hobbit' },

{ title: 'Culture', note: 'River Folk' },

{ title: 'Alter Ego', note: 'Smeagol' }

]

{

quote: 'Go back, Sam! I\'m going to Mordor alone!',

image: 'assets/img/avatar-frodo.jpg',

items: [

{ title: 'Race', note: 'Hobbit' },

{ title: 'Culture', note: 'Shire Folk' },

{ title: 'Weapon', note: 'Sting' }

]

{

quote: 'What we need is a few good taters.',

image: 'assets/img/avatar-samwise.jpg',

items: [

{ title: 'Race', note: 'Hobbit' },

{ title: 'Culture', note: 'Shire Folk' },

{ title: 'Nickname', note: 'Sam' }

]

}

];

this.character = characters[this.params.get('charNum')];

}

ionViewDidLoad() {

console.log('ionViewDidLoad DetailPage');

}

dismiss() {

this.viewCtrl.dismiss();

}

src/theme/variables.scss

...

@media only screen {
  .my-modal {
    //.modal-open { overflow: auto; }
    //.modal.in { pointer-events: none; }
    //.modal-content { pointer-events:all; }
    //.modal-backdrop { display: none; }    

    ion-backdrop {
      visibility: visible;
    }

   .modal-wrapper {
      position: absolute;
      width: 90%;
      height: 90%;
      top: 5%;
      bottom: 5%;
      left: 5%;
      right: 5%;
      margin: auto;
      border: 0;   
   } 
 }
}

...

@media only screen {

.my-modal {

//.modal-open { overflow: auto; }

//.modal.in { pointer-events: none; }

//.modal-content { pointer-events:all; }

//.modal-backdrop { display: none; }

ion-backdrop {

visibility: visible;

}

.modal-wrapper {

position: absolute;

width: 90%;

height: 90%;

top: 5%;

bottom: 5%;

left: 5%;

right: 5%;

margin: auto;

border: 0;

}

Link

ionic-team/ionic-preview-app

Phaisarn Sutheebanjard

blog.phaisarn.com

การเรียกใช้ Modal พร้อมส่งค่าไปให้

1. สร้างแอพและรัน

src/app/app.module.ts

src/pages/home/home.html

src/pages/home/home.ts

src/pages/detail/detail.html

src/pages/detail/detail.ts

src/theme/variables.scss