Ionic 离子6模态与透明背景？

z4bn682m 于 2022-12-16 发布在 Ionic

关注(0)|答案(2)|浏览(177)

我想我的模态有一个内容（图像），和一个透明的背景，但我不能实现透明的背景，我会很感激，如果你能帮助我。
非常感谢！

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;
}

ionic-framework

来源：https://stackoverflow.com/questions/73459602/ionic-6-modal-with-transparent-background

2条答案

按热度按时间

ut6juiuv1#

从你的模态html中删除你的ion内容。它继承了你打开模态html的组件的背景颜色。
在您的global.css中：

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

赞(0）回复(0）举报 2022-12-16

093gszye2#

如果这个方法不起作用，那么你可以给Modal父元素添加不透明度。
模态组件代码：-

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

  </div>
</div>

此处mainContent是完整页面（透明背景），feedbackCard是子部分（具有白色背景），下面是上述组件的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;
}

赞(0）回复(0）举报 2022-12-16

我来回答

Ionic 离子6模态与透明背景？

2条答案

相关问题

热门标签

最新问答