Modal is a pop up which is displayed over the current page. This is used to show messages, records and create or editing the records in pop up window. Modal block everything else on the page until any action is performed or the modal is dismissed. A modal can be opened either on click of button or link. You can customize the header, footer and body of a modal. Modal can be closed by clicking on the close button.
- In the vast majority of the cases, Default Modals are used as wide as 50% of the viewport.
- Modals have to account for an equal amount of space at the top and bottom for the height of the close button.
- Modals grow flexibly as per the content within; but once reached a full height with the mentioned space on top and bottom, the content area begins to scroll.
- Modals have a tagline in the header by simply adding a paragraph in the heading.
- Modal’s content area does not have any spacing by default allowing the content such as tables to go full width.
- Large modals require a large amount of content and their height follows the same behaviour and styles. These modals need a linearly directional paradigm of navigation, that is, Next, Back, etc. the actionable buttons in the modal footer live on both left and right rather all on the right.
- Consider using a ‘Prompt’ if you are using Modal for a System Alert.