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 参考案例

/lixian1998/ionic-custom-alert-modal.git

1.3 效果