A dialog is a common and well-known UI pattern. For browsers there are two types: popup and window. The window dialog is described briefly here, but this pattern's focus is the popup dialog.

A popup dialog is an extension of the calling page and is dependent upon the calling page in every way because it is a part of it. As such, popup dialogs have the following characteristics:

A window dialog is actually a secondary browser window, and operates independently from the calling page. Because it is a browser window, it has its own native window management controls (Minimize, Maximize, Close) in a title bar provided by the OS. It is popular for use cases such as a chat window because:

Elements and Appearance

All Alta UI popup dialogs have the following characteristics:

The following is an example of a typical popup dialog. It contains a standard button (OK) and a close icon (X).

Illustration of a typical PaaS popup dialog

Historically, when a dialog called another dialog, that was referred to as "cascading". Cascading dialogs would slightly overlap, which would allow the user to see both the called and calling dialog. Presenting cascading dialogs in this fashion worked well on the desktop but not very well on mobile devices.

Because Alta UI Browser Patterns are designed as mobile-friendly, Alta UI dialogs do not cascade with slightly overlapping popups. When an Alta UI dialog calls another dialog, the called dialog anchors directly over the calling dialog. The "cascading" Alta UI popup dialogs have the following characteristics:

Additional Resources