Modal vs modeless
The choice between a surface that blocks the rest of the app until it closes and one that stays open while you keep working.
See it
What it is
A modal surface puts the app into a temporary mode: everything behind it is unavailable until the surface closes. A modeless surface stays alongside the work, so you can move between it and the rest of the app. Photoshop is the clearest tutor here: the Layers panel is modeless and you paint straight through it, while the 'Save changes before closing?' sheet is modal and nothing else responds until you answer.
Use modal behavior when someone must answer before continuing, usually because the next step is destructive, security-sensitive, or impossible without a choice. Use modeless behavior for reference, repeated adjustments, and tools that benefit from seeing or editing the page at the same time.
The gotcha is treating visual prominence as a reason to block. A modal steals context, focus, and keyboard access to the page, so routine settings and long forms quickly become traps. Modeless UI has the opposite risk: it can drift out of sync with the content it controls. Keep its target obvious, update it when selection changes, and never let two modeless tools silently overwrite each other.
Ask AI for it
Implement modal and modeless variants with the native HTML dialog element. Open the destructive confirmation with showModal(), let the browser make the background inert, move focus to Cancel, close on Escape, and restore focus to the trigger. Open the editing inspector with dialog.show() so the page remains usable, give it a visible Close button, and update its heading whenever the selected object changes. Never stack either dialog, and use a normal route instead when the task needs more than one screen of fields.