A modal is a secondary window that communicates or provides an action inside the same process.
Selecting multiple items in a modal must be done by selecting each desired element through the checkbox. The selection will be finished by clicking in Done button at the modal footer.
Single selection must be done by clicking directly on the desired element. In this case, the element must not have a Choose or Select button. The modal doesn't have footer as there is no need.
Modal over modal is a not desired situation. Please, try to solve this situation in another way, like using a full page or driving the process to the correct place. In case this happens, make sure to provide a good experience preventing first modal closing by accidental interaction (as an example).
Modals are always displayed at the center of the screen and can be configured with the sizes shown in the table below:
|Large||896px wide modal on screen sizes greater than 992px. 600px wide modal on screen sizes between 768px and 992px.|
|Full width||A modal that stretches to fit the browser window, with 45px padding on every side.|
Lexicon allows your modal window to have different configurations related to your needs. These needs vary from case to case and that is why not every modal in the system needs to be equal, but needs to follow certain rules.
This is the classic composition of a modal window with its three main parts: header, body, and footer.
This configuration is used when you don't need a footer bar to place your icons.
Use this configuration when you just need to show text and buttons to agree or cancel.
You can of course add an iframe to a modal body at any time. See the iframe modal body Clay section for more information.
The modal overlay color is a main lighten 8% color with an alpha value of 0.8.
Modal headers can be configured to use modals as status messages. This solution is proposed to give more emphasis on blocking actions that the use must read and pay careful attention.
Never remove the icon in the title, as it provides the modal with a better user experience for accessibility.
Always use direct and concrete titles.
When a modal is viewed on a mobile device, its look and feel transforms to the one shown below to provide a mobile friendly user experience. The modal occupies the whole screen, drawing the user's attention.