teatime-components icon indicating copy to clipboard operation
teatime-components copied to clipboard

Overlay

Open mightyaleksey opened this issue 8 years ago • 0 comments

Place to gather all the requirements for the modal windows (knows as popups also). Let it be O. for short. So, I'll start.

Types

  • Tooltips with a tail which points on the anchor element. Usually used to show additional description or list of options. For example, select.
  • Modals. Usually doesn't have any tail and may contain addition canvas which overlays the background content and makes accent on the O. itself. May be used to provide additional functionality (form or etc.) or show big amount of data.

Functionality

  • O. should overlay other static elements.
  • In case of multiple O. (presumably nested O.) the nested one should be higher then its parent.
  • Focus. For UX it can be vital to set focus on the nested element after O. was opened. And return it backward after O. was closed.
  • Check the accessibility issues.

Good artists copy great steal

or a small overview of existing solutions

  • https://twitter.com/floydophone/status/784323301975875584

mightyaleksey avatar Oct 10 '16 17:10 mightyaleksey