Modal

Overview

The modal component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

Behaviour

Modal width can be changed by via the following classes: .sgds-modal.is-small, .sgds-modal.is-large or .sgds-modal.is-fullwidth.
Always include <div class="sgds-modal-background"> inside the .sgds-modal container for the modal overlay.

Examples

1) Default modal

<!-- You can change the modal width using .sgds-modal.is-small, .sgds-modal.is-large or .sgds-modal.is-fullwidth -->
<div class="sgds-modal" id="default-modal" aria-labelledby="sgds-modal-title" role="dialog">
    <div class="sgds-modal-background"></div>
    
    <div class="sgds-modal-card">
        <header class="sgds-modal-card-head">
            <p class="sgds-modal-card-title" id="sgds-modal-title">Singapore Government Design System</p>
            <button class="delete" aria-label="close"></button>
        </header>
        <section class="sgds-modal-card-body">
            <p>Design System unites Singapore Government digital services around a common visual language  and user experience</p>
            <p>Make a decision:</p>
            <button type="button" class="sgds-button">Yes</button>
            <button type="button" class="sgds-button">No</button>
        </section>
        <footer class="sgds-modal-card-foot is-flex-justify-fe">
            <button class="sgds-button is-text">Cancel</button>
            <button class="sgds-button is-success">Save</button>
        </footer>
    </div>
</div>

2) Image modal

<div class="sgds-modal" id="image-modal" aria-label="Image caption here" role="dialog">
    <div class="sgds-modal-background"></div>
    <div class="sgds-modal-content">
        <img src="https://placehold.it/1280x720/" alt="placeholder image">
    </div>
    <button class="sgds-modal-close is-large" aria-label="close"></button>
</div>

Interactivity with JavaScript

SGDS does not provide interactivity for modals out of the box, so here's how you can implement modal opening and closing behaviour:

Modals are hidden (display: none) by default, and appear (display: flex) when you attach the .is-active class on the wrapping .sgds-modal container. For example, to show a modal:

<script>
    document.querySelector(".sgds-modal").classList.add("is-active");
</script>

Similarly, to close a modal, simply remove the .is-active class from the wrapping .sgds-modal element.

Style

Modifier	Description
`sgds-modal is-active`	Set the modal to display: flex (default value is display: none)
`sgds-modal is-small`	Set the modal width to 30vw (viewport width)
`sgds-modal is-large`	Set the modal width to 70vw (viewport width)
`sgds-modal is-fullwidth`	Set the modal width to 95vw (viewport width)

When to use

Modals should be used when:

You want to interrupt a user’s current task to direct the user’s attention to something important. For example, confirming when a user wants to submit a form, user sign up and login, or highlighting an important event with an infographic upon entering your website.

Modals should not be used when:

You need to present simple notifications to the user. It should always accompany something actionable by the user such as confirming or filling in a form. If you need to notifiy the user or something important, use something less intrusive such as the notification component instead.

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component