Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Modal

Purpose: The Modal forces users to focus on the task at hand.
Composition: A Modal is a full-screen dialog on top of the greyed-out ILIAS screen. The Modal consists of a header with a close button and a typography modal title, a content section and might have a footer.
Effect: All controls of the original context are inaccessible until the Modal is completed. Upon completion the user returns to the original context.

Popover: Modals have some relations to popovers. The main difference between the two is the disruptive nature of the Modal and the larger amount of data that might be displayed inside a modal. Also popovers perform mostly action to add or consult metadata of an item while Modals manipulate or focus items or their sub-items directly.

Usage

The main purpose of the Modals MUST NOT be navigational. But Modals MAY be dialogue of one or two steps and thus encompass "next"-buttons or the like.
Modals MUST NOT contain other modals (Modal in Modal).
Modals SHOULD not be used to perform complex workflows.
Modals MUST be closable by a little “x”-button on the right side of the header.
Modals MUST contain a title in the header.
If a Modal contains a form, it MUST NOT be rendered within another form. This will break the HTML-engine of the client, since forms in forms are not allowed.

Parents

Descendants