Modal
The modal is a container generally displayed in response to an action.
It is used for short forms, confirmation messages or to display contextual information that does not require a page. The modal should always be used in conjunction with the Application Layout Containers. See an example App layout page with Modal
Although the following examples use the
<h3>
tag for the title element, the styling provided by Fundamental Library Styles will remain consistent for any heading level used.<h1>
should be reserved for the page title.
Informational Modal
This is used to present information to the user but the Alert Component doesn’t fit all the information.
Product Added
Automatic Product ID: PD-3465334
Expiration date: 13/03/2018
<div class="fd-modal">
<div class="fd-modal__content" role="document">
<div class="fd-modal__header">
<h3 class="fd-modal__title">Product Added</h3>
<button class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l" aria-label="close"></button>
</div>
<div class="fd-modal__body">
<b>Thew new product have been added to your catalog.</b><br/>
<br/>
Automatic Product ID: <b>PD-3465334</b><br/>
<br/>
Expiration date: <b>13/03/2018</b><br/>
<br/>
</div>
</div>
</div>
Confirmation Modal
This is used to confirm with the user before continuing with a destructive or complex action. In this case, the modal has action buttons at the bottom.
Delete
<div class="fd-modal">
<div class="fd-modal__content" role="document">
<div class="fd-modal__header">
<h3 class="fd-modal__title">Delete</h3>
<button class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l" aria-label="close"></button>
</div>
<div class="fd-modal__body">
Do you want to delete item <b>X</b>?
</div>
<footer class="fd-modal__footer">
<button class="fd-button">Yes</button>
<button class="fd-button--light">No</button>
</footer>
</div>
</div>
Form Modal
This is used for short forms in order to collect information from the user.
Invite user
<div class="fd-modal">
<div class="fd-modal__content" role="document">
<div class="fd-modal__header">
<h3 class="fd-modal__title">Invite user</h3>
<button class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l" aria-label="close"></button>
</div>
<div class="fd-modal__body">
<div class="fd-form-item">
<label class="fd-form-label" aria-required="true" for="input-2">Email*</label>
<input class="fd-input" type="text" id="input-2">
</div>
</div>
<footer class="fd-modal__footer">
<button class="fd-button">Invite</button>
<button class="fd-button--light">Cancel</button>
</footer>
</div>
</div>