ionicでカスタムダイアログボックスを作成する

Question

ionic2にカスタムダイアログボックスを作成したいとします。私は参考文献ionic docsのチュートリアルをたくさん試しましたが、私は何をしたいのですか？

ユーザーがアイコンをクリックしたときに表示します。

私は同じことを達成するためにいくつかのアイデアを与えてください。

Answer 1

カスタムクラス名とイオンモーダルを使用することができますので、あなたはポップアップ開くためにのみ、このポップアップ

のCSSを上書き：モーダルで使用

openModal() { 
    let modal = this.modalCtrl.create(CustomPopup,{},{showBackdrop:true, enableBackdropDismiss:true}); 
    modal.present(); 
} 

コンポーネント：

import { Component, Renderer } from '@angular/core'; 
import { ViewController } from 'ionic-angular'; 

@Component({ 
    selector: 'custom-popup', 
    templateUrl: 'custom-popup.html' 
}) 
export class CustomPopup { 

    text: string; 

    constructor(public renderer: Renderer, public viewCtrl: ViewController) { 
    this.renderer.setElementClass(viewCtrl.pageRef().nativeElement, 'custom-popup', true); 

    } 

} 

を

とfinaly SCSS：

ion-modal.custom-popup ion-backdrop { 
    visibility: visible !important; 
    z-index:0; 
} 
ion-modal.custom-popup .modal-wrapper{ 
    top: 20%; 
    width:60%; 
    height:300px; 
    position:absolute; 
} 

Answer 2

あなたは以下のようにカスタムコントローラを作成追加することができます -

import { AlertController } from 'ionic-angular'; 

constructor(private alertCtrl: AlertController) { 

} 

presentAlert() { 
    let alert = this.alertCtrl.create({ 
    title: 'Low battery', 
    subTitle: '10% of battery remaining', 
    cssClass: 'my-class', 
    buttons: ['Dismiss'] 
    }); 
    alert.present(); 
} 

<style> 
.my-class{ 
background: gray; 
color:#333; 
} 
</style> 

をあなたのカスタムスタイルを追加することができますと同じように。あなたは完全な例を得ることができます - https://www.tutorialsplane.com/ionic-popup