Set modal to be "active" on element which is currently focused

[pnikolagelato]

Hi I am using the docs implemented way of showing a dialog but the thing is, In my app I can have several open modals at the same time, my problem is that I want when the user clicks on a modal, to make that particular modal pop and be on top.

So basically, imagine where you have 3 modals open, stacked on each other, I want to make the one that I click next, be the one that is most on top,

Right now I cant achieve that

[snowystinger]

That wouldn't be accessible. Please see the aria pattern https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/, which states everything outside and under the dialog is inert and, therefore, cannot be clicked or interacted with in any way.

I think what you're trying to implement is panels? Instead of implementing them as dialogs, you could just implement them as part of the document flow and normal interaction. Within each panel, you could use a FocusScope to manage focus within it if that is a particular concern. Just keep in mind keyboard users need to be able to move from one to another, so they probably shouldn't be traps.

It might be more helpful to provide an example of what you're trying to accomplish.