Modal

Available since 1.0.0

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 SAP Fundamentals 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

Thew new product have been added to your catalog.

Automatic Product ID: PD-3465334

Expiration date: 13/03/2018

<div class="modal-demo-bg">
<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" 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>
</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

Do you want to delete item X? 
<div class="modal-demo-bg">
<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" 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">
            <div class="fd-modal__actions">
                <button class="fd-button">Yes</button>
                <button class="fd-button--light">No</button>
            </div>
        </footer>
    </div>
</div>
</div>


Form Modal

This is used for short forms in order to collect information from the user.

Invite user

<div class="modal-demo-bg">
<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" aria-label="close"></button>
        </div>
        <div class="fd-modal__body">
            <div class="fd-form__group">
                <div class="fd-form__item">
                    <label class="fd-form__label" aria-required="true" for="input-2">Email*</label>
                    <input class="fd-form__control" type="text" id="input-2">
                </div>
            </div>
        </div>
        <footer class="fd-modal__footer">
            <div class="fd-modal__actions">
                <button class="fd-button">Invite</button>
                <button class="fd-button--light">Cancel</button>
            </div>
        </footer>
    </div>
</div>
</div>