basti
April 18, 2022, 9:50pm
1
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
basti
August 15, 2022, 7:58pm
2
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?
lupas
September 30, 2022, 9:11am
3
@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()