search

pradel / react-responsive-modal

Simple responsive react modal
https://react-responsive-modal.leopradel.com/
MIT License
604 stars 95 forks source link

Multiple modals shouldn't stack on top of each other #486

Closed cmmartin closed 2 years ago

cmmartin commented 2 years ago

Feature request

Is your feature request related to a problem? Please describe.

Multiple modals shouldn't be stacked on top of each other. It's an odd UX. Especially when the transparent overlays stack and the background becomes increasingly obfuscated with each added modal.

Describe the solution you'd like

The currently displayed modal content should disappear and the new modal content should appear reusing the existing overlay. Then when the second modal is dismissed, the first should appear again.

This can be implemented as a stack. Each time a modal is triggered, it's pushed onto an array of displayed modals. Only the last item in the array is actually rendered (the "top" of the stack). Dismissing a modal pops it off the stack. This might require a context provider to store the modal stack.

Additional context

Notice the first modal showing in the background as well as the opacity of the overlay has been halved.

Screen Shot 2022-02-16 at 1 51 55 PM
pradel commented 2 years ago

I don't see an issue with stacked modals but you are right that just one overlay could be better, happy to accept a pr that will just show the first one 👍

cmmartin commented 2 years ago

Yeah it's pretty subjective. I think I'm actually going to go with the "infinite modal" approach in this article, which can be implemented using a single react-responsive-modal. I'll make a PR for the overlay if I end up using multiple though.