Modal Panels
A Modal Panel allows a user to edit a task or object detail. It appears in front of all other windows, blocking all other interaction, until the user dismisses it.
Related Guidelines
Notifications, Modal Dialog, [Popover] (https://qa.dimsum.rd.elliemae.io/?path=/story/components-popover--basic), List, Shuttle, Input Collection, Wizard
Usage
A Modal Panel provides a framework for creating custom modal windows using predefined layouts for common activities as well as the flexibility to create custom forms and layouts.
The anatomy of modal panel
Custom Form Layout Panel
A large version of the Custom Form Layout Panel
A small version of the Custom Form Layout Panel
Form Layout Modal Panel Example
Selection Modal Panel
Selecting from a list is a common user task. This is created using the Modal Panel and a List
Shuttle Panel
The Shuttle provides the user with the ability to create and edit a list by selecting items from one column and moving them to another. This is created using the Modal Panel and a Shuttle.
Shuttle Guideline
Shuttle Component
Wizard Panel
A Wizard modal helps the user complete a complex process. The workflow is divided into a sequence of numbered steps. A wizard is particularly useful in helping users get through a workflow, ensuring a high rate of successful completion. This is created using the Modal Panel and a Wizard
Wizard Guideline
Wizard Component
Updated about 2 years ago