Backdrop for stack modal

I want to add a backdrop to my stacked modal, like here:

and put this:

ion-modal.stack-modal { 
 --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); 
 --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}

in my global.scss.

Now I’m opening my Modal with:

const modal = await this.modalCtrl.create({
      component: StackedModalPage,
      cssClass: 'stack-modal',
      componentProps: {

Should it work this way? It’s not working for me.

1 Like

I tried it also in the page.scss file and everything I found elsewhere, but a smaller modal over a bigger modal still get no backdrop.
No one here with the same problem?

@basti

Tried to achieve the same, in the end I got it to work the following way (notice the “important”):

Global SCSS:

.stack-modal {
  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.8) !important;
}

Using Modal:

const modal = await modalController.create({
  component: MyModal,
  cssClass: 'stack-modal',
})
modal.present()