Classifying Dialogs

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:


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