Generate one backdrop per modal

[aoumiri]

When we open a modal thanks to the modal service, a modal is created in the DOM with it associated backdrop, which is really nice to emphasis that whatever outside of the modal container is not clickable.

But let's imagine that the first modal opens a second modal: the second modal appears directly on top of it, without any clear separation because we still have a single backdrop. See this video here that demonstrate it:

Before.multiple.backdrops.mp4

To improve how the overlapping modals are displayed to the user, this PR changes the way the backdrop is handled, and proposes to create as many backdrops as there are modals. that way, there is a backdrop separation between the first and the second modal, making it clear that the only interactive modal is the one on top:

After.multiple.backdrops.mp4

I am conscious of the fact that overlapping modals have to be avoided as much as possible, but sometimes you need it for things such as user approval for a sensitive action through MFA or similar: in that case you have to stop the current flow, wait for their approval and resume it.

[pichfl]

Happy to see this implemented and I agree: There should never be stacked modals, but there is always the odd outlier and it needs to work properly.