Modal
Examples
Modals are composed of several parts. To render a modal, include a modal backdrop, modal header, modal body, and modal footer (optional). By default modals are aligned to the top of the page.
Base
Modal Title
Modal content
<!-- Trigger -->
<button id="modal-trigger-1" class="chi-button chi-modal__trigger" data-target="#modal-1">
Launch demo modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-1" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-1'));</script>
Center
Modals can also be placed in the middle of the page by applying the class -center
to chi-backdrop
.
Modal Title
Modal content
<!-- Trigger -->
<button id="modal-trigger-2" class="chi-button chi-modal__trigger" data-target="#modal-2">
Launch center modal
</button>
<!-- Modal -->
<div class="chi-backdrop -center -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-2" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-2'));</script>
Scrollable
Enable scrolling if the height of the modal's content is larger than the modal's content container.
Requirements
A max-height
must be defined on chi-modal__content
.
Use max-height utility classes such as -mh--400
or -mh--480
, or define your own value.
Modal Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac odio quis sem placerat porta vel nec leo. Phasellus et malesuada nisi.
Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa. Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat, cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
<!-- Trigger -->
<button id="modal-trigger-3" class="chi-button chi-modal__trigger" data-target="#modal-3">
Launch scrollable modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-3" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content -mh--400">
<p class="-text -mt--0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-3'));</script>
Scrolling long content
Enable scrolling when modals become too long for the user’s viewport or device, they scroll independent of the page itself.
Modal Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
Integer sed ligula pulvinar, posuere sem nec, varius risus. Vivamus facilisis, eros quis tempus accumsan, nulla ligula aliquam nulla, sed porttitor quam quam auctor diam. Nullam vitae placerat arcu, a suscipit neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac odio quis sem placerat porta vel nec leo. Phasellus et malesuada nisi.
Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa. Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat, cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
<!-- Trigger -->
<button id="modal-trigger-4" class="chi-button chi-modal__trigger" data-target="#modal-4">
Launch long scrollable modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed -mh--480">
<div class="chi-backdrop__wrapper">
<section id="modal-4" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -mt--0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at hendrerit lacus. Nunc ornare sollicitudin arcu vitae viverra. Nam in aliquam augue. Nunc dignissim purus sed massa consequat dictum.
</p>
<p class="-text">
Nam volutpat tellus sapien, ac aliquam nisl mattis id. Etiam laoreet malesuada tristique. Morbi luctus facilisis laoreet. Sed pharetra diam consequat, ultrices sem facilisis, ornare urna. Suspendisse nec mollis massa.
Praesent ipsum purus, euismod quis mattis et, scelerisque in erat. Etiam laoreet dolor non suscipit laoreet. Sed nec mauris vitae ipsum mollis laoreet et sed nisi. In at metus eget neque consequat pellentesque. Aliquam erat volutpat.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque egestas ultricies justo, vel scelerisque justo. Aliquam mollis diam ac ligula feugiat placerat sed iaculis urna. Donec in mi consequat,
cursus ante non, pulvinar eros. Phasellus viverra massa venenatis, pellentesque lectus auctor, condimentum nibh. Donec malesuada magna sed libero tincidunt, id tempus lectus mollis.
</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-4'));</script>
With Subtitle
Modal Title
Modal subtitle
Modal content
<!-- Trigger -->
<button id="modal-trigger-5" class="chi-button chi-modal__trigger" data-target="#modal-5">
Launch modal with subtitle
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-5" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<h3 class="chi-modal__subtitle">Modal subtitle</h3>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-5'));</script>
Inverse Backdrop
Invert a modals backdrop by applying the class -inverse
.
Modal Title
Modal content
<!-- Trigger -->
<button id="modal-trigger-6" class="chi-button chi-modal__trigger" data-target="#modal-6">
Launch inverse modal
</button>
<!-- Modal -->
<div class="chi-backdrop -inverse -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-6" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-6'));</script>
No Border
Disable header or footer borders by applying the class -no-border
to
chi-modal__header
or chi-modal__footer
.
Modal Title
Modal content
<!-- Trigger -->
<button id="modal-trigger-7" class="chi-button chi-modal__trigger" data-target="#modal-7">
Launch no border modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-7" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header -no-border">
<h2 class="chi-modal__title">Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer -no-border">
<button class="chi-button" data-dismiss="modal">Cancel</button>
<button class="chi-button -primary">Save</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-7'));</script>
Alert
Alert Modal Title
Replace this subhead text with specific text from project documentation
Supporting text to explain the subhead text. Check user story to customize based on requirements. This is placeholder text to show spacing and line height. Replace this text with text provided in requirements.
<!-- Trigger -->
<button id="modal-trigger-alert" class="chi-button chi-modal__trigger" data-target="#modal-alert">
Launch portal alert modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-alert" class="chi-modal -portal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title">Alert Modal Title</h2>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<div class="-d--flex">
<i class="chi-icon icon-circle-x -sm--3 -icon--danger -mr--2"></i>
<div class="-w--100">
<p class="-text--bold -m--0">Replace this subhead text with specific text from project documentation</p>
<p class="-mt--1 -mb--0">Supporting text to explain the subhead text. Check user story to customize based on requirements. This is placeholder text to show spacing and line height. Replace this text with text provided in requirements.</p>
</div>
</div>
</div>
<footer class="chi-modal__footer">
<button class="chi-button -primary">Button</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-alert'));</script>
Multi-step
For multi-step modals, ensure the class -centered
is applied
to chi-modal__title
. This will provide sufficient real estate on the
left side to store a back button chi-modal__back
.
Modal Title
Modal content
<!-- Trigger -->
<button id="modal-trigger-8" class="chi-button chi-modal__trigger" data-target="#modal-8">
Launch multi-step modal
</button>
<!-- Modal -->
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-8" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<header class="chi-modal__header">
<h2 class="chi-modal__title -centered">Modal Title</h2>
<button class="chi-modal__back" aria-label="Back"></button>
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
</header>
<div class="chi-modal__content">
<p class="-text -m--0">Modal content</p>
</div>
<footer class="chi-modal__footer">
<button class="chi-button -primary">Next</button>
</footer>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-8'));</script>
Simple
Remove chi-modal__header
and chi-modal__footer
for a simple and customizable modal.
Modal Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.
<!-- Trigger -->
<button id="modal-trigger-9" class="chi-button chi-modal__trigger" data-target="#modal-9">
Launch simple modal
</button>
<div class="chi-backdrop -closed">
<div class="chi-backdrop__wrapper">
<section id="modal-9" class="chi-modal" role="dialog" aria-label="Modal description" aria-modal="true">
<button class="chi-button -icon -close" data-dismiss="modal" aria-label="Close">
<div class="chi-button__content">
<i class="chi-icon icon-x"></i>
</div>
</button>
<div class="chi-modal__content -text--center -p--6">
<h2 class="-text--h3 -text--bolder -m--0">Modal Title</h2>
<p class="-text -py--1 -px--3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mollis nulla, eget ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet rutrum eros laoreet.</p>
<button class="chi-button -primary -lg -mt--1">Action</button>
</div>
</section>
</div>
</div>
<!-- JavaScript -->
<script>chi.modal(document.getElementById('modal-trigger-9'));</script>
JavaScript
Properties
This component accepts options to configure its behavior.
Methods
Method | Description | Returns |
---|---|---|
hide() => void | Hides the modal | Type: void |
show() => void | Shows the modal | Type: void |
toggle() => void | Toggles active state (show/hide) | Type: void |
Events
Event | Description |
---|---|
chiModalShow | Modal show method has been executed, but the showing animation has not started yet. |
chiModalHide | Modal hide method has been executed, but the closing animation has not started yet. |
chiModalShown | Modal has been shown to the user and is fully visible. The animation has completed. |
chiModalHidden | Modal has been hidden to the user. The animation has completed. |
Preventing memory leaks
Modal components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.
var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
// do stuff
modal.dispose();
It is safe to call the modal
method more than once, as it will return any previously created modal component
associated with the trigger.
var elem = document.getElementById('modal-1');
var modal = chi.modal(elem);
var elem2 = document.getElementById('modal-1');
var modal2 = chi.modal(elem2);
modal === modal2; // returns true
modal.dispose(); // Only have to do it once.