Ionic
1 基于ion-modal自定义alert弹出框
1.1 步骤
1.在全局css样式文件(global.scss)中定义弹出框css样式
.customModal {
--background: var(
--ion-overlay-background-color,
var(--ion-color-step-100, #f9f9f9)
);
--max-width: 270px;
--backdrop-opacity: var(--ion-backdrop-opacity, 0.3);
--min-width: 250px;
--width: auto;
--min-height: auto;
--height: 50%;
--max-height: 100%;
}
2.创建组件
ionic g component components/customModal
3.调用方法
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
cssClass: 'customModal'
});
return await modal.present();
}
1.2 参考案例
https://github.com/lixian1998/ionic-custom-alert-modal.git
1.3 效果