Ionic 6堆叠模态框添加背景遮罩无效问题求助

问题原因 #

Ionic默认仅最底层模态框显示背景遮罩，堆叠在上层的小尺寸模态框的遮罩会被默认隐藏，直接给ion-modal设置--backdrop-opacity无法覆盖这一默认行为。

修复方案 #

1. 更新global.scss样式 #

通过Shadow DOM的part选择器强制启用并设置上层模态框的背景遮罩：

ion-modal.stack-modal { 
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); 
}

// 选中模态框的背景遮罩元素，强制显示并设置透明度
ion-modal.stack-modal::part(backdrop) {
  opacity: var(--ion-backdrop-opacity, 0.32) !important;
  display: block !important;
}

2. 完善模态框创建代码 #

确保代码参数完整并调用present()方法：

const modal = await this.modalCtrl.create({
  component: StackedModalPage,
  cssClass: 'stack-modal',
  componentProps: {
    // 填入你的组件属性
  }
});
await modal.present();

可选优化 #

若需自定义遮罩颜色，可在::part(backdrop)中添加背景色设置：

ion-modal.stack-modal::part(backdrop) {
  opacity: var(--ion-backdrop-opacity, 0.32) !important;
  display: block !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

内容的提问来源于stack exchange，提问作者bastifix