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:

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.


As found here

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?

Answered By – Dolan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published