Ionic 6 modal with transparent background?-CodePudding

I want my modal to have a content (image), and a transparent background, but I can't achieve the transparent background, I will appreciate if you can help me.

Thank you very much!

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

CodePudding user response：

Remove your ion-content from you modal html. It inherit the background color from the component where you open the modal.

in you global.css :

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

CodePudding user response：

If this approach doesn't work, then instead you can add opacity to Modal parent element. For example :-

Modal component code :-

<div padding >
  <div no-margin margin-top >

  </div>
</div>

Here mainContent is complete page (transparent bg) and feedbackCard is the subpart (having white bg) and below is the CSS for above component

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

And you can open Modal using below code.

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

global.scss

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