Ionic 5 Modal over modal 缺少离子背景

Question

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

前言：这在 V4 中运行良好，但在升级到 V5 时出现问题。我不想改变我的页面方法，只是修复 CSS/whatever 实际上导致下面的问题。

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

然后我可以在最佳。第二个模态缺少离子背景及其边框阴影造型。

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

Step1 好 enter image description here

第 2 步 - 破碎的离子背景： enter image description here

正在显示我的自定义模式：

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 class（但请注意，这是 iOS 特定的，因此您可能需要对 Android-等价于class):

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

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

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

Answer 2

感谢 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 3

现在 Ionic 文档中解决了这个问题。请参阅离子模态的 'Customization' 部分：https://ionicframework.com/docs/api/modal

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

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

Answer 4

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

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

Ionic 5 Modal over modal 缺少离子背景

Ionic 5 Modal over modal is missing ion-backdrop

modal-dialog

ionic4

ionic5