Ionic组件之弹窗实例：

 效果图：

 直接上代码：

1.组件action-sheets.ts代码：

import {Component} from '@angular/core';
import { ActionSheetController,Platform,AlertController } from 'ionic-angular';
@Component({
    templateUrl:'action-sheets.html'
})
export class ActionSheets{
    constructor(
        public actionSheetCtrl:ActionSheetController,
        public platform:Platform,
        public alertCtrl:AlertController
    ){}
    //action sheets
    presentActionSheet(){
        let actionSheet=this.actionSheetCtrl.create({
            title:'Modify your album',
            cssClass: 'action-sheets-basic-page',
            buttons: [
                {
                    text: 'Destructive',
                    role: 'destructive',
                    icon: !this.platform.is('ios') ? 'trash' : null,
                    handler: () => {
                        console.log('Destructive clicked');
                    }
                },
                {
                    text: 'Archive',
                    handler: () => {
                        console.log('Archive clicked');
                    }
                },
                {
                    text: 'Cancel',
                    role: 'cancel',
                    handler: () => {
                        console.log('Cancel clicked');
                    }
                }
            ]
        });
        actionSheet.present();
    }

    //弹窗
    showAlert(){
        let alert=this.alertCtrl.create({
            title:"New Friend!",
            subTitle:"Your friend,Obi wan Kenobi,just accepted your friend request!",
            buttons:['OK']
        });
        alert.present();
    }
    showPrompt(){
        let prompt=this.alertCtrl.create({
            title:'login',
            message:"enter a name for this new album you are so keen on adding",
            inputs:[
                {
                    name:'titled',
                    placeholder:'Titlek'
                },
            ],
            buttons:[
                {
                    text:'Cancel',
                    handler:data=>{
                        console.log('Cancel clicked');
                    }
                },
                {
                    text:'Save',
                    handler:data=>{
                        for(var x in data){
                            console.log(x);
                        }
                        console.log(data+'Saved clicked');
                    }
                }
            ]
        })
        prompt.present();
    }

    showConfirm() {
        let confirm = this.alertCtrl.create({
            title: 'Use this lightsaber.',
            message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
            buttons: [
                {
                    text: 'Disagree',
                    handler: () => {
                        console.log('Disagree clicked');
                    }
                },
                {
                    text: 'Agree',
                    handler: () => {
                        console.log('Agree clicked');
                    }
                }
            ]
        });
        confirm.present();
    }
    testRadioOpen: boolean;
    testRadioResult;
    showRadio(){
        let alert=this.alertCtrl.create();
        alert.setTitle('Lightsaber color');
        alert.addInput({
            type:'radio',
            label:'blue',
            value:'blue',
            checked:true
        });
        alert.addButton('Cancel');
        alert.addButton({
            text:'OK',
            handler:data=>{
                this.testRadioOpen=false;
                this.testRadioResult=data;
                console.log(this.testRadioResult);
            }
        });
        alert.present().then(()=>{
            this.testRadioOpen=true;
        });
    }
    testCheckboxOpen: boolean;
    testCheckboxResult;
    showCheckbox(){
        let alert=this.alertCtrl.create();
        alert.setTitle('Which planets have you visited?');
        alert.addInput({
            type:'checkbox',
            label:'Alderaan',
            value:'value',
            checked:true
        })
        alert.addButton('Cancel');
        alert.addButton({
            text:'Okay',
            handler:data=>{
                console.log('Checkbox data:',data);
                this.testCheckboxOpen=false;
                this.testCheckboxResult=data;
            }
        })
        alert.present();
    }
}

2.action-sheets.html代码

<ion-header>
    <ion-navbar>
        <ion-title>Action Sheets</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding class="action-sheets-basic-page">
    <button ion-button block (click)="presentActionSheet()">Show Action Sheet</button>
    <button ion-button block (click)="showAlert()">Show Alert</button>
    <button ion-button block  (click)="showPrompt()">Show Prompt</button>
    <button ion-button block  (click)="showConfirm()">Show Confirm</button>
    <button ion-button block  (click)="showRadio()">Show Radio</button>
    <button ion-button block  (click)="showCheckbox()">Show Checkbox</button>
</ion-content>
<!--<ion-content padding>-->
    <!--<button ion-button block color="dark" (click)="showAlert()">Show Basic Alert</button>-->
<!--</ion-content>-->