Is it possible to have two interactable HTML dialogs open at the same time?
I've got a situation where in our current environment our modals are hand built with divs and positioning. I've been in the process of migrating them to a native HTML dialog element and have a situation where an initial modal would be open, and a second modal can be opened in a side by side view to do additional work.
I'm not sure how or if two dialogs can be open and interactable at the same time. I think I can technically achieve this by opening them with .show() instead of .showModal() however I then have other problems with dom layout and z-indexing if done that way. I also lose the niceties of the native dialog. Any ideas?
2 Replies
I dont have an answer for the two dialogs but if there's a conflict w hen you test, you could throw a popover attribute on your current div and migrate the functionality with popover target
as the showModal will open in a #top-layer which spans the entire width and height of the viewport, and the #top-layer on itself is not customizable, i don't see a way to have 2 active ones next to each other
https://developer.mozilla.org/en-US/docs/Glossary/Top_layer
maybe you can find a way for your purpose to have the main modal opened as showModal and the second one inside of that with show()
something like this https://codepen.io/MarkBoots/pen/dyxpLWp?editors=1111
(placement will be a bit tricky though)
