在离子中创建自定义对话框2

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

    } 

} 

andfinaly 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

您可以添加创建如下自定义控制器 -

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