Ionic 5 Modal over modal 缺少离子背景

Posted 2023-03-04

【中文标题】Ionic 5 Modal over modal 缺少离子背景

【英文标题】：Ionic 5 Modal over modal is missing ion-backdrop

【发布时间】：2020-10-10 07:18:40

【问题描述】：

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

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

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

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

我可以看到 ion-backdrop 肯定在 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;
      
    
  

【参考方案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 团队能提出一个更优雅的解决方案来解决这个问题。

【讨论】：

先生，我敢打赌您花了一些时间才找到这个：P 谢谢。

您的第一个解决方法对我不起作用，但第二个解决方法（为 android 添加类“sc-ion-modal-md-h”就像一个魅力）。谢谢

【参考方案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);

【参考方案3】：

现在在 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);