Multiple modals on a page -- components not properly behind background
denishaskin opened this issue · comments
There seem to be at least one or two other issues regarding a similar problem, but they seem to be ignored.
Using the modal component, if you have multiple of them on a page, opening a modal will not correctly hide components of later modals from showing up through the background.
A codepen that demonstrates this is here: https://codepen.io/denishaskin/pen/LYqZyja
The simplest example is just have 2 separate modal components, copying the HTML exactly from the project's examples. Click on the first button, the modal will show but the second button also shows.
It is exacerbated if you have (as we do), other components that we have to have inside a modal component (for interaction with the controller). Even if we didn't need that, the fact that the later modal's button isn't hidden is a non-starter. Is there a way to work around this?
You've got a z-10 on that element, so you'll want to adjust so the modal backdrop is a higher z-index.