Dialogs, Popovers & the Top Layer Mess

Dialogs (or modals) and popovers are essential UI components that interrupt the user's workflow to display critical information or offer interactive elements. A dialog is a window that requires user interaction before proceeding, typically used for actions like confirmations, forms or certain alerts. A popover is a floating element that offers contextual actions, such as tooltips or dropdowns but also more information based notifications and toasts. Both components help manage interactions without navigating away from the page. The Problem The main challenge when using modals and popovers together is managing their stacking order. When a modal is opened while a popover is visible, the popover often gets hidden behind the modal and becomes inert. Even when reopened, the popover remains non-interactive even if it is visibly above the modal, frustrating users and developers alike. GitHub Issues Timeline Issue #9075: March 2023, OddBird requests a method to view the current top layer order. Issue #9733: September 2023, keithamus requests an event to notify when modals or popovers are shown. Real-World Examples This issue arises often in web apps. For instance, when a dropdown (popover) is open and requires input in a modal dialog, the popover becomes stuck behind the modal. As more dialogs open, the popover gets lost. Here’s an example: click "Start" to open a modal dialog, then open a popover. You’ll notice the popover becomes inert even though it was opened after the dialog. You can continue to open more dialogs and see the popover fade further and further into the background. A Solution A proper solution would allow some popovers to remain exempt from the inert state. Additionally, an event should trigger when the "top layer" changes, and developers should be able to manage the stacking order dynamically. This would ensure the right elements stay interactive. Example React Hook I've created a React Hook that tracks the top layer, letting you see which elements are in the top layer and which position, with this information you can portal and re-promote popovers to help prevent them from getting stuck behind modals. Check it out here: React Hook for Top Layer Stack Management Here’s a demo in action. This solution is only possible because of the new toggle event (mentioned in the github issues). We can listen for any element being added or removed from the top layer and keep a list. In an ideal world the browser would just have some mechanism for returning this list without us having to make our own copy. Updating the Spec As the web is open, we can contribute to improving standards. Proposals for changes to the specification can be submitted to the WHATWG HTML repository. Ensure your suggestion is thoroughly considered to facilitate the process. Conclusion I worry these stacking issues are holding dialogs back from mainstream adoption. By addressing problems like this, we can improve the web and create a more user-friendly experience for everyone. If anyone has any thoughts, ideas or just wants to talk about the problem more feel free to leave a comment. Thanks for reading! If you'd like to connect, here are my Twitter, BlueSky, and LinkedIn profiles. Come say hi

Feb 18, 2025 - 22:40

Dialogs (or modals) and popovers are essential UI components that interrupt the user's workflow to display critical information or offer interactive elements.

A dialog is a window that requires user interaction before proceeding, typically used for actions like confirmations, forms or certain alerts.

A popover is a floating element that offers contextual actions, such as tooltips or dropdowns but also more information based notifications and toasts.

Both components help manage interactions without navigating away from the page.

The Problem

The main challenge when using modals and popovers together is managing their stacking order. When a modal is opened while a popover is visible, the popover often gets hidden behind the modal and becomes inert. Even when reopened, the popover remains non-interactive even if it is visibly above the modal, frustrating users and developers alike.

GitHub Issues Timeline

Issue #9075: March 2023, OddBird requests a method to view the current top layer order.
Issue #9733: September 2023, keithamus requests an event to notify when modals or popovers are shown.

Real-World Examples

This issue arises often in web apps. For instance, when a dropdown (popover) is open and requires input in a modal dialog, the popover becomes stuck behind the modal. As more dialogs open, the popover gets lost.

Here’s an example: click "Start" to open a modal dialog, then open a popover. You’ll notice the popover becomes inert even though it was opened after the dialog. You can continue to open more dialogs and see the popover fade further and further into the background.

A Solution

A proper solution would allow some popovers to remain exempt from the inert state. Additionally, an event should trigger when the "top layer" changes, and developers should be able to manage the stacking order dynamically. This would ensure the right elements stay interactive.

Example React Hook

I've created a React Hook that tracks the top layer, letting you see which elements are in the top layer and which position, with this information you can portal and re-promote popovers to help prevent them from getting stuck behind modals.

Check it out here: React Hook for Top Layer Stack Management

Here’s a demo in action.

This solution is only possible because of the new toggle event (mentioned in the github issues). We can listen for any element being added or removed from the top layer and keep a list. In an ideal world the browser would just have some mechanism for returning this list without us having to make our own copy.

Updating the Spec

As the web is open, we can contribute to improving standards. Proposals for changes to the specification can be submitted to the WHATWG HTML repository. Ensure your suggestion is thoroughly considered to facilitate the process.

Conclusion

I worry these stacking issues are holding dialogs back from mainstream adoption. By addressing problems like this, we can improve the web and create a more user-friendly experience for everyone. If anyone has any thoughts, ideas or just wants to talk about the problem more feel free to leave a comment.

Thanks for reading! If you'd like to connect, here are my Twitter, BlueSky, and LinkedIn profiles. Come say hi