Ionic 6模态与透明背景

Question

我希望我的模态有一个内容(图像(和透明背景，但我无法实现透明背景，如果你能帮助我，我将不胜感激。

非常感谢！

Ionic CLI: 6.19.0
Ionic Framework: @ionic/angular 6.0.4

---

global.scss
.modal-answer .modal-wrapper {
--background: transparent !important;
margin: 0 auto;
height: 40%;
top: 30%;
width: 70%;
display: block;
}

---

game.ts
const modal = await this.modalController.create({
component: ModalAnswerPage,
cssClass: 'modal-answer',
componentProps: {
answe: this.ok_bad_time,
back_g: this.color_backg_modal_ answer'
}
});
return await modal.present().then(_ => {
});

---

modal-answer.page.scss

ion-content{
--background: transparent;
}

Answer 1

从模态html中删除离子内容。它继承了打开模态的组件的背景颜色。

在你的global.css:

ion-modal {
--background: transparent !important;
}

Answer 2

如果这种方法不起作用，那么您可以向Modal父元素添加不透明度。例如：-

模态部件代码：-

<div padding class="mainContent">
<div no-margin margin-top class="feedbackCard">
</div>
</div>

这里的mainContent是完整的页面(透明bg(，feedbackCard是子部分(有白色bg(。下面是上面组件的CSS

.mainContent {
flex: 1;
background-color: rgba(0, 0, 0, 0.3) !important;
justify-content: center;
align-content: center;
align-items: center;
display: flex;
}
.feedbackCard {
width: 100%;
border-radius: 4px;
background-color: white;
}

您可以使用以下代码打开Modal。

const modal = await this.modalCtrl.create({FeedbackComponent, 'backTransparent', {}});
modal.present();

global.scss

.backTransparent {
--background: transparent !important;
}