Create custom dialog box in ionic 2 - ionic-framework

Question

I want to create custom dialog box in ionic2. I have tried lot's of reference ionic docs tutorial but I am not getting what I want.
I want to show this when user click on icon.
Please give me some idea to achieve the same.

Answer 1

You can use an ionic modal with a custom class name,so you override the css only for this popup
to open the popup:
openModal() {
let modal = this.modalCtrl.create(CustomPopup,{},{showBackdrop:true, enableBackdropDismiss:true});
modal.present();
}
component used in modal:
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);
}
}
and finaly the 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

You can add create custom controller as below -
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>
On the same way you can add your custom style. You can get complete example on - https://www.tutorialsplane.com/ionic-popup