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.

<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.

<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.

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