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
Singapore Government Design System
Design System unites Singapore Government digital services around a common visual language and user experience
Make a decision:
<!-- 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.
Feedback
Having troubles with the guide? Please give us more details and we'll get back to you soon.
Chat with the team