Ionic 5 Modal over modal 缺少离子背景

Question

为什么当我在另一个模态之上打开一个模态时，我的离子背景 + 模态阴影样式不起作用？

前言：这在 V4 上运行良好，但在升级到 V5 时出现故障。我不想更改我的页面方法，只需修复 CSS/任何实际导致以下问题的内容。

• 我的应用程序打开一个带有自定义 css 的模式页面以使其全屏显示。

  然后我可以在顶部打开另一个正常模式（但不是全屏）。第二个模式缺少离子背景及其边框阴影样式。

  我可以看到 ion-backdrop 肯定在 DOM 中，但显然没有显示。

Step1 Fine 在此输入图片说明

第 2 步 - 破碎的离子背景： 在此处输入图像描述

显示我的自定义模式：

async showClipboard() {
    const modal = await this._ModalController.create({
      component: ClipboardPage,
      cssClass: 'custom-round-modal',
      componentProps: {
        user: this.user
      },
      showBackdrop: true
    });
    await modal.present(); 
  }

CSS：

@media only screen and (min-width: 768px) {
  .custom-round-modal {
    .modal-wrapper {
      border-radius: 15px !important;
      -moz-border-radius: 15px !important;
      -webkit-border-radius: 15px !important;
      .ion-page {
        border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -webkit-border-radius: 15px !important;
      }
    }
  }
}

Answer 1

首先，我认为您错误地粘贴了两次相同的屏幕截图。但是我遇到了同样的问题，所以我知道你的意思。

看起来 Ionic 5 为模态引入了这个 css：

.sc-ion-modal-ios-h:first-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

这意味着当您同时显示多个模态时，只有第一个会获得背景。

一种可能的解决方法是使用以下方法将背景自己添加到全局 css 中：

ion-modal {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

或者使用 Ionic 正在使用的 css 类（但请注意，这是特定于 iOS 的，因此您可能需要对 Android 等效类执行相同的操作）：

.sc-ion-modal-ios-h {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
}

注意：如果您在彼此之上显示多个非全屏模式，这可能看起来不太好，因为您将在彼此之上获得多个背景（因此它们会变得越来越暗）。但是由于您的问题是全屏模式之上的非全屏模式，我认为它适用于您的情况。

希望 Ionic 团队能够针对这个问题提出更优雅的解决方案。