Bunfx componentsDialogs
Use a dialog for a focused task that belongs to the current page. Prefer a full page when the task is complex, needs its own URL, or should be easy to resume.
Progressive enhancement
The trigger is an ordinary link to a complete standalone page. With JavaScript, the same link opens a native modal dialog, which provides focus trapping and Escape-key dismissal.
Review dialog exampleClosing and focus
People can use the close button or press Escape. After closing, focus returns to the link that opened the dialog. Clicking the backdrop does not dismiss it, which prevents accidental loss of work.