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

Launch 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

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.

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.