ionic-frameworkmodal-dialogionic6

Stacked Modal in ionic 6 without Backdrop

I try to add a backdrop to my stacked modal (ionic 6) with a smaller size then the first opened, like here: https://ionicframework.com/docs/api/modal

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: {

But it’s not working for me, the smaller Modal opens without any backdrop.

Solution

  • As found here https://forum.ionicframework.com/t/backdrop-for-stack-modal/222468

    Try using !important

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

    Are you by any chance the "basti" user on the referenced forum?