Agent WranglersFeedback and dialogs Recommended
Keep dialogs for short tasks
Use a modal dialog only for a short task that must finish before anything else, such as a confirmation. Give longer tasks their own page with its own address.
How to do it
Build modals as dialog element describes. Never open one on page load, and never open a second modal on top of the first. A task with more than 5 fields or several steps gets a page or a side panel. People can then link to it, reload and use Back. Use a popover for menus.
How to check
A browser test opens each modal and counts open dialog:modal elements. There is never more than one, and no modal is open right after any page loads.
For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/feedback-and-dialogs/dialogs-for-short-tasks.