Ionic - V5 transparent modal not working

Hi everybody. I searched for every solution I could find for this but I could not make my modal window semi transparent. It seems Ionic / Angular (I am not sure which one) is generating an extra div (with id=“background-content”) that is making my background solid and I cannot change that with ANY styling.

image1918×1052 245 KB

Without it I can see the content from the background:

image1842×1004 294 KB

I tried adding global styles, local styles (directly referencing #background-content) but they are not applied.
The idea is to create a semi transparent unlock slider modal.

I tried this solution: Ionic-v4 how to make transparent modal
And this one: https://github.com/ionic-team/ionic/issues/18589
And this one: https://stackoverflow.com/questions/57181464/ionic-4-how-to-change-modal-background-to-transparent

None of them worked. Any ideas what I might be missing?

Here is the content of modal html:

<ion-content class="ion-no-padding ion-no-margin">
  <unlocker (unlocked)="unlockedHandler($event)"></unlocker>
</ion-content>

Here is how I call the modal:

this.modal = await this.modalController.create({
          component: UnlockerPage,
          cssClass: 'unlocker-content',
          showBackdrop: false,
          swipeToClose: true
        });

Here is my global scss style:

.unlocker-content {
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.3) !important;
  --background: transparent !important;

  .modal-wrapper {
    background-color:rgba(0, 0, 0, 0.3) !important;
    --background: transparent !important;
  }
}

Any help and tips would be appreciated.

1 post - 1 participant

Read full topic