As part of the initial work introduced by Szymon with
jsdialog: show overlay for all modals · CollaboraOnline/online@5e3cf57 · GitHub and the further effort from Gokay around JSDialog I thought would be useful to write down our JSDialog categories and how they should be handle:
A popup (also known as an overlay or popover) is a window or dialog that appears on top of the page content. A dialog can be classified according to two dimensions:
1. Whether the background is dimmed:
Nonlightbox: background is not dimmed
Lightbox: background is dimmed
2. Whether the user can interact with the rest of the page:
Dialogs
Modal: user can’t interact with background content
- It it not movable/dragable
- It is lightbox
- Clicking outside only closes the dialog if it’s a info dialog (make use of the existent “cancellable” property)
Nonmodal: user can interact with background content
- It is movable/dragable
- It is nonlightbox
- Clicking outside of the dialog doesn’t close the dialog
Non-dialog components
- Examples: dropdowns, autofilter, cell value selector
- Properties: POPOVER it indicates non-dialog component
- is nonlightbox
- Clicking outside closes the widget