Keep the backdrop on the second modal

Ionic Framework ionic-v3
1

Hello,
When I open 2 modals, the backdrop element of the second modal is not visible.
This is due to a core style that overwrites the css variable:

ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
    --backdrop-opacity: 0;
    --box-shadow: none;
}

I tried to use a stronger CSS selector but the core styles stay prior

Is there a way to keep the backdrop style for all the modals?

demo
demo790×818 78.5 KB

Thanks,
Loïc

2

After several tests, I arrive to overwrite the styles but not with all the same behaviors:

.modal-default ~ .modal-default::part(backdrop) {
	background-color: var(--ion-backdrop-color) !important;
	opacity: 0.5 !important;
}

Now, the backdrop is visible but the transition is not maintained and so, the backdrop appears very quickly without any smooth animation even if I add a custom transition property.

Also, I don’t really appreciate using the !important. So if there is another workaround, this could be very nice!

Regards,
Loïc

3

What type of modal are you using? inline or controller?

4

Hello,
I use the controller modal for the moment.