So in this example, in my App I use a drawer object that contains a single module "Client Profile." The "Client Profile" module has several modals within it that almost always contain a single module themselves.
In this particular screenshot, I'm looking at a Client Profie, and I then open up the "Book" Modal, which contains another module "Booking."
What ends up happening is an unexpected layering - the modal "Book" ends up under the drawer. This causes some issues:
1). User can't see full Modal if it's too large
2). "Click outside to close" behavior gets fudged - I can't remember exactly what happens but I think I remember that the windows will close in an unexpected order.
3). Modal close button gets hidden
I'm working around it generally by making my modals smaller - but there's a lot of cases where this doesn't work great. Sometimes the user has the browser on half their screen (splitscreen) or the modal just can't realistically be shrunk (like the Booking calendar). I also need to use custom buttons or keyboard shortcuts so I can guarantee the user can close the correct windows - not amazing.
Our app is pretty big (500+ components on this particular page), so the module hierarchy is really important to keeping it reasonably organized and realistically editable. I'd definitely prefer not to de-modulize it.
Possibly this is just a bug?
Edit: It actually works fine / as expected in preview. The issue only arises when looking at the live, published page.
Additional commentary: The ability to use drawers within modules would be a really useful improvent. They do a great job of organizing without cluttering the main screen and probably 80% of the modals I use in the "Client Profile" I think would be better served in a drawer.
Thanks for considering!
Wow, nice looking app @richschaeffer! Congrats on that!
Patrick
1 Like
Hi @richschaeffer. Thanks for the feedback here!
We're currently in the process of testing a new modal frame to replace the legacy modal component. This new modal frame works more like drawers, and will also address the stacking issue you describe here. As long as the modal is opened after the drawer, it will:
- open on top of the drawer and be entirely visible (including any of the "close buttons" you add to it
- handle its own "click outside to close" event
We do not plan to address these issues in the legacy modal, but we will start beta testing this feature later this week.
2 Likes
Ahhh great! Sign me up for the beta 
Any update on this? @andoliveyou
Hi there! Thanks for checking in. A small bug has delayed our beta launch to Wednesday. I'll follow up when I've turned it on for your instance.
Unfortunately, after testing, we've discovered that the same issue still occurs with the new Modal Frame.
Is there anything that can be done?
Here, you can see the Modal Frame (on top) with regular modals popping up
underneath
Maybe there's some kind of custom css that could work to give regular modals the highest possible z index? It would pretty much fix my problem if normal modals were ALWAYS on top.
