在 ionic 2 中创建自定义对话框

Question

我想在 ionic2 中创建自定义对话框。我已经尝试了很多参考 ionic docs 教程，但我没有得到我想要的。

我想在用户点击图标时显示这个。

请给我一些实现相同目标的想法。

Answer 1

您可以使用具有自定义 class 名称的离子模态，因此您仅针对此弹出窗口覆盖 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);

  }

}

最后是 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

上获得完整示例

在 ionic 2 中创建自定义对话框

Create custom dialog box in ionic 2

ionic-framework

ionic-view

ionic2

ionic3