Create custom dialog box in ionic 2

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