Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiple modals on a page -- components not properly behind background #209

Closed
denishaskin opened this issue Nov 1, 2023 · 1 comment
Closed

Comments

@denishaskin
Copy link

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

image

image

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?

@excid3
Copy link
Owner

excid3 commented Nov 1, 2023

You've got a z-10 on that element, so you'll want to adjust so the modal backdrop is a higher z-index.

Repository owner locked and limited conversation to collaborators Nov 1, 2023
@excid3 excid3 converted this issue into discussion #210 Nov 1, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants