A modal is a box with content displayed on top of the page to capture the user’s attention for an specific action inside the same process. Modals are subordinated to pages.
Modals can be configured in 4 different size and they are defined as table shows:
|Large||900px wide modal in window sizes greater than 992px. 600px wide modal in window 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 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 is the case when you don't need a footer bar to place your icons.
This case is thought for those cases where you need to just show text and buttons to agree or cancel.
It is always possible to bring an iFrame inside the body. For more information about this check Quartz.
When a modal reaches the mobile viewport size its look and feel is transformed to the one you see below offering a mobile friendly version. Modal occupies the hole screen allowing only the interaction with the modal and its content.