为什么当我在另一个模态之上打开一个模态时，我的离子背景 + 模态阴影样式不起作用？
前言：这在 V4 中工作正常，但在升级到 V5 时被破坏了。我不想改变我的页面方法，只需修复 CSS/实际导致以下问题的任何内容。
-
我的应用会打开一个带有自定义 css 的模式页面，使其全屏显示。
然后我可以在 返回页首。第二种模态缺少离子背景及其边界阴影 造型。
我可以看到离子背景肯定在 DOM 中，但它是 显然没有显示。
步骤1 精细 在此处输入图像描述
第 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;
}
}
}
}
首先，我认为您错误地粘贴了两次相同的屏幕截图。但我遇到了同样的问题，所以我知道你的意思。
看起来 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团队能为这个问题提出一个更优雅的解决方案。
这在 Ionic 文档中得到了解决。 请参阅离子模态的"自定义"部分：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);
}
谢谢 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);
}
我通过在 Ionic V7 中的"global.scss"文件中添加以下 CSS 来解决此问题：
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;
}
我解决了将以下 css 添加到 Ionic v5 中的变量.css文件中的问题。给一个机会。
.backdrop-no-scroll {
ion-router-outlet {
background: white;
}