Ionic 5 模态模态缺少离子背景

Question

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

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

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

  然后我可以打开另一个普通模式（但不是全屏） 顶部。第二个模态缺少离子背景及其边界阴影 造型。

  我可以看到离子背景肯定在 DOM 中，但它是 显然没有显示。

Step1 精细

第 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团队能够针对这个问题提出更优雅的解决方案。

Answer 2

现在 Ionic 文档中解决了这个问题。 请参阅 ion-modal 的“自定义”部分：https://ionicframework.com/docs/api/modal

将以下 CSS 添加到您的模态类 -

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

Answer 3

谢谢 krisloekkegaard 的代码，这对我很有帮助。

我想补充一点，它只有放在全局 sass 或 css 文件中才会起作用！您无法从组件的样式文件中执行此操作，因为模式将在其外部创建。

以下几行更加精确，因为它们只会在最后一个模态上激活背景。即使您有 10 个堆叠模态，也只会是第一个元素的背景和最后一个元素的背景相互重叠。

.sc-ion-modal-md-h:last-of-type {
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

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

Answer 4

我解决了在 Ionic v5 中将以下 css 添加到变量.css 文件中的问题。给个机会吧。

.backdrop-no-scroll {
ion-router-outlet {
  background: white;
}

Answer 5

我解决了将以下 css 添加到 ionic v7 中的 global.scss 文件中的问题：

ion-modal.modal-default.show-modal:last-of-type {
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
}