Modals
Purpose
A modal is a special treatment for a component that lives on top of a view and provides focus for the content within the modal. Depending on the type of modal, such as a pushback or dialog box, the content in the view may be partially or completely disabled.
Standard Modal
Usage
Follow these guidelines for effective modal usage:
Use modals when the customer may be at risk for compromised security.
Always provide a way of closing the modal to return to the original view. Clicking anywhere outside of the modal should also close the modal.
Only use modals for components that offer the customer one step toward completion. If the component offers multiple actions and steps, link to a view instead.
Do not use modals for any component that can be found by deeplink. For example, when a customer clicks on a link from an email, they should be brought to a view, not a modal.
Do not use modals unexpectedly or for promotional content. Instead, treat promotional content like any other component in a view.
Modals should be used sparingly as they are a jarring experience and don’t always translate well to smaller screen devices.
Specs
Background Overlay = Black, 50% opacity
Modal Width = 4-, 6-, 8-, or 10-column grid class
Title Bar Color = Bright Blue
Title Bar Heading = Heading 3, White
Body Heading = Heading 5, Gray 06
Body Text = Body 1, Gray 06
Glyph = Close (large)
Alignment = Centered vertically and horizontally
Example
<div data-toggle="dismissible" id="modal-example" class="display-none">
<div class="modal-screen"></div>
<div class="modal flex flex-align-center">
<div class="container">
<div id="modal-dialog" role="dialog" aria-modal="true" tabindex="0">
<header class="flex flex-align-center dls-bright-blue-bg dls-white">
<h2 class="fluid text-align-center heading-3">Modal Title</h2>
<button class="focus-light" data-dismiss aria-label="Close">
<i data-dls-glyph="close" data-dls-glyph-size="lg" aria-label="Close Icon"></i>
</button>
</header>
<div class="card">
<div class="pad-responsive-extra-lr">
<h2 class="heading-5 margin-3-b text-align-left pad-3-t">Modal Heading</h2>
<p class="pad-2-b">At velit consequat percipitur nam, sit minim reformidans ex, ius modo docendi an. Sed ut malis ludus, ut idque doctus vis. Sit at wisi dicant omittam, lorem erroribus ex sit. No vis ipsum voluptaria cotidieque, minimum menandri pertinax ea mei, eu vero graecis moderatius qui.</p>
</div>
<div class="text-align-right-sm-up text-align-center-sm-down pad border-t pad-4-lr">
<button class="btn">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute;top: 50%;left:42%;transform: translateY(-50%);">
<button class="btn" id="modal-trigger" type="button" onclick="openModal()">Open Modal</button>
</div>
<script>
const callingElement = document.getElementById('modal-trigger');
const closeButton = document.querySelector('[data-dismiss]');
function openModal() {
var modal = document.getElementById('modal-example');
var modalDialog = document.getElementById('modal-dialog');
modal.classList.remove('display-none');
trapFocus(modal);
modalDialog.focus();
}
function handleClickOutside(event) {
var example = document.getElementById('modal-dialog');
if (example && !example.contains(event.target) && event.target.type !== 'button') {
document.getElementById('modal-example').classList.add('display-none');
returnFocus();
}
};
function dismissModal(event) {
if (event.key === 'Escape' || event.key === 'Esc') {
document.getElementById('modal-example').classList.add('display-none');
returnFocus();
}
}
function returnFocus() {
callingElement.focus();
}
window.addEventListener('click', handleClickOutside);
document.addEventListener('keydown', dismissModal);
closeButton.addEventListener('click', returnFocus);
function trapFocus(element) {
var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
firstFocusableEl.focus();
element.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === 'Tab');
if (!isTabPressed) {
return;
}
if ( e.shiftKey ) /* shift + tab */ {
if (document.activeElement === firstFocusableEl) {
lastFocusableEl.focus();
e.preventDefault();
}
} else /* tab */ {
if (document.activeElement === lastFocusableEl) {
firstFocusableEl.focus();
e.preventDefault();
}
}
});
}
</script>Dialog Boxes
Definition
Dialog boxes are a type of alert message that prevent customers from continuing their current task until they address the content within the dialog. Dialog boxes always exist within a modal. They should only be used to alert customers to critical information or an action related to their journey, such as accidentally leaving a form before submitting.
Usage
Follow these guidelines when using dialog boxes:
Present the customer with a clear question or statement in the content area that explains the outcome of their choice, such as “Do you want to leave this page?”
Always provide two calls-to-action that allow the customer to either 1) continue to a new view or 2) close the dialog box and return to the original view.
Avoid ambiguous statements or questions such as “Warning!” or “Are you sure?”
Specs
Background Overlay = Black, 50% opacity
Modal Width = Use a 4-, 6- or 8-column grid class
Alignment = Vertically and horizontally aligned
Heading Text = Heading 3, Gray 06
Body Text = Body 1, Gray 06
Use Case Example = Security Verification
Example
<div>
<div class="modal modal-screen" data-toggle="dismissible" id="dialog-example">
<div class="dls-white-bg text-align-center dls-gray-05 pad-3" id="dialog-content" role="dialog">
<h3 class="heading-3 margin-1-b">Do you want to leave this page?</h3>
<p class="body-1 margin-3-b">Any information you've entered will be lost.</p>
<button class="btn btn-block margin-auto-lr margin-1-b">Leave</button>
<button class="btn btn-block margin-auto-lr btn-tertiary" data-dismiss>Stay</button>
</div>
</div>
</div>
<script>
const callingElement = document.getElementById('dialog-trigger');
const closeButton = document.querySelector('[data-dismiss]');
function openDialog() {
var dialog = document.getElementById('dialog-example');
dialog.classList.remove('display-none');
trapFocus(dialog);
}
function handleClickOutside(event) {
var example = document.getElementById('dialog-content');
if (example && !example.contains(event.target) && event.target.type !== 'button') {
document.getElementById('dialog-example').classList.add('display-none');
returnFocus();
}
};
function dismissDialog(event) {
if (event.key === 'Escape' || event.key === 'Esc') {
document.getElementById('dialog-example').classList.add('display-none');
returnFocus();
}
}
function returnFocus() {
callingElement.focus();
}
window.addEventListener('click', handleClickOutside);
document.addEventListener('keydown', dismissDialog);
closeButton.addEventListener('click', returnFocus);
function trapFocus(element) {
var focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var firstFocusableEl = focusableEls[0];
var lastFocusableEl = focusableEls[focusableEls.length - 1];
firstFocusableEl.focus();
element.addEventListener('keydown', function(e) {
var isTabPressed = (e.key === 'Tab');
if (!isTabPressed) {
return;
}
if ( e.shiftKey ) /* shift + tab */ {
if (document.activeElement === firstFocusableEl) {
lastFocusableEl.focus();
e.preventDefault();
}
} else /* tab */ {
if (document.activeElement === lastFocusableEl) {
firstFocusableEl.focus();
e.preventDefault();
}
}
});
}
</script>Pushbacks
Allows View Interaction
A pushback is a type of modal that sits on top of a section of a view and doesn’t block content. A customer can use it while still interacting with both the page wrapper and other components in the view.
Usage
Follow these guidelines for effective pushback usage:
Use pushbacks for short journeys that branch from a parent journey.
Only allow one pushback to be open in a view at once. Opening another pushback in the view should automatically close any other open one.
Preserve any data that has been entered if a customer closes a pushback before completing their journey. Repopulate the data if they return to that journey.
Do not use pushbacks for multistep journeys. Link to a view instead.
Specs
Modal Width = Use a 4-, 6-, 8- or 10-column grid class
Original Component = 80% width, Black, 30% opacity overlay