Skip to main content

Modal

Present content in a smaller window that is displayed on top of the main application or site content

Overview #

Use the modal component to present content in a smaller window that is displayed on top of the main application or site content.

Examples #


<button type="button" class="rvt-button" data-rvt-modal-trigger="modalExample">
<span>Modal example</span>
</button>
<div class="rvt-modal" id="modalExample" role="dialog" tabindex="-1" hidden aria-labelledby="modal-example-title" data-rvt-modal="modalExample">
<div class="rvt-modal__inner" data-rvt-modal-inner>
<header class="rvt-modal__header">
<h1 class="rvt-modal__title" id="modal-example-title">Account Number Required</h1>
</header>
<div class="rvt-modal__body">
<p>You'll need a <a href="#0">purchasing account number</a> to complete registration. Make sure you have your purchase card ready before completing this application.</p>
</div>
<div class="rvt-modal__controls">
<button type="button" class="rvt-button" role="button">
<span>I want to continue</span>
</button>
<button type="button" class="rvt-button" data-rvt-modal-close="modalExample" role="button">
<span>No</span>
</button>
<button type="button" class="rvt-button" data-rvt-modal-close="modalExample" role="button">
<span>No, please cancel</span>
</button>
</div>
<button class="rvt-button rvt-button--plain rvt-modal__close" data-rvt-modal-close="modalExample" role="button">
<span class="rvt-sr-only">Close</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z" />
</svg>
</button>
</div>
</div>
<button type="button" class="rvt-button" data-rvt-modal-trigger="modalWithForm">
<span>Modal with form</span>
</button>
<div class="rvt-modal" id="modalWithForm" role="dialog" tabindex="-1" hidden aria-labelledby="modal-example-title" data-rvt-modal="modalWithForm">
<div class="rvt-modal__inner" data-rvt-modal-inner>
<header class="rvt-modal__header">
<h1 class="rvt-modal__title" id="">Modal Title</h1>
</header>
<div class="rvt-modal__body">
<div class="m-bottom-sm">
<label class="rvt-label" for="the-title">Title</label>
<input class="rvt-text-input" type="text" id="the-title">
</div>
<label class="rvt-label" for="description">Description</label>
<textarea class="rvt-textarea" id="description"></textarea>
<fieldset class="rvt-fieldset">
<legend class="rvt-ts-20 rvt-m-bottom-sm"><strong>Select dropdown</strong> default</legend>
<label class="rvt-label" for="select-demo">Select input:</label>
<select class="rvt-select m-bottom-md" id="select-demo">
<option value="">Option One</option>
<option value="">Option Two</option>
<option value="">Option Three</option>
<option value="">Option Four</option>
</select>
</fieldset>
<fieldset class="rvt-fieldset rvt-m-top-xl">
<legend class="rvt-ts-20 rvt-text-bold">Category</legend>
<ul class="rvt-list-inline">
<li>
<div class="rvt-checkbox">
<input type="checkbox" name="checkbox-demo" id="checkbox-1" checked>
<label for="checkbox-1">Option one</label>
</div>
</li>
<li>
<div class="rvt-checkbox">
<input type="checkbox" name="checkbox-demo" id="checkbox-2">
<label for="checkbox-2">Option two</label>
</div>
</li>
<li>
<div class="rvt-checkbox">
<input type="checkbox" name="checkbox-demo" id="checkbox-3">
<label for="checkbox-3">Option three</label>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="rvt-modal__controls">
<button type="button" class="rvt-button" role="button">
<span>OK</span>
</button>
<button type="button" class="rvt-button" data-rvt-modal-close="modalWithForm" role="button">
<span>Cancel</span>
</button>
</div>
<button class="rvt-button rvt-button--plain rvt-modal__close" data-rvt-modal-close="modalWithForm" role="button">
<span class="rvt-sr-only">Close</span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.41,8l5.29-5.29a1,1,0,0,0-1.41-1.41L8,6.59,2.71,1.29A1,1,0,0,0,1.29,2.71L6.59,8,1.29,13.29a1,1,0,1,0,1.41,1.41L8,9.41l5.29,5.29a1,1,0,0,0,1.41-1.41Z" />
</svg>
</button>
</div>
</div>
<button type="button" class="rvt-button" data-rvt-modal-trigger="modalDialogExample">
<span>Modal dialog</span>
</button>
<div class="rvt-modal" id="modalDialogExample" role="dialog" tabindex="-1" hidden aria-labelledby="modal-dialog-title" data-rvt-modal="modalDialogExample" data-rvt-modal-dialog>
<div class="rvt-modal__inner" data-rvt-modal-inner>
<header class="rvt-modal__header">
<h1 class="rvt-modal__title" id="">Modal Dialog</h1>
</header>
<div class="rvt-modal__body">
<p>A modal dialog:</p>
<ul>
<li>Is not dismissable i.e. doesn't have an (X) button</li>
<li>Requires user input before they continue their work</li>
</ul>
</div>
<div class="rvt-modal__controls">
<button type="button" class="rvt-button" role="button">
<span>Yes</span>
</button>
<button type="button" class="rvt-button" data-rvt-modal-close="modalDialogExample" role="button">
<span>No, thanks</span>
</button>
</div>
</div>
</div>
<button type="button" class="rvt-button" data-rvt-modal-trigger="modalConfirmation">
<span>Confirmation modal dialog</span>
</button>
<div class="rvt-modal" id="modalConfirmation" role="dialog" tabindex="-1" hidden aria-labelledby="modal-title-confirmation" data-rvt-modal="modalConfirmation" data-rvt-modal-dialog aria-describedby="modal-description-confirmation">
<div class="rvt-modal__inner" data-rvt-modal-inner>
<header class="rvt-modal__header">
<h1 class="rvt-modal__title" id="">Delete item</h1>
</header>
<div class="rvt-modal__body">
<p class='m-top-remove m-bottom-xl' id='modal-description-confirmation'>Are you sure you want to <strong>delete your progress</strong>? This modal is a dialog and can not be dismissed by clicking outside of the modal on the background.</p>
</div>
<div class="rvt-modal__controls">
<button type="button" class="rvt-button rvt-button--danger" role="button">
<span>Delete my progress</span>
</button>
<button type="button" class="rvt-button rvt-button--secondary" data-rvt-modal-close="modalConfirmation" role="button">
<span>Cancel</span>
</button>
</div>
</div>
</div>

Attributes #

Use the following attributes to configure a modal:

Attribute Description
data-rvt-modal-dialog Add to the root data-rvt-modal element to prevent the user from dismissing the modal via an “X” button or the escape key

Usage #

  • Both a trigger button and modal element are required. A modal requires both a trigger button with the data-rvt-modal-trigger attribute and a div element with the data-rvt-modal attribute. The value of the data-rvt-modal-trigger attribute must match the id of the associated modal. Modal HTML can appear anywhere in the DOM and is often deferred to the bottom of a page’s markup. See the code examples on this page for guidance. (Exception: See JavaScript, below.)
  • Modal headers are optional. You can omit the element with the .rvt-modal__header class if you don’t need it.
  • Action buttons are optional. You can omit the element with the .rvt-modal__controls class if you don’t need to use action buttons.
  • Only use dialogs for confirmation. Since modal dialogs can’t be closed, the user is forced to interact with them before they can return to their workflow. Use dialogs only in situations where you need to confirm that the user understands something or wants to perform a destructive action, such as deleting all their files.

Do

  • Use when you need to create a focused space for users to complete a small subtask
  • Use to help users determine information needed in their main workflow, such as calculating a number or looking up a code
  • Use to interrupt the user's workflow when you need to confirm a destructive action
  • Keep modal text brief
  • Put a modal's primary action button first if using more than one button

Don't

  • Use only to save space on a long page
  • Use to show an error message—use an alert instead
  • Display large amounts of information about multiple tasks
  • Require confirmation for routine or non-destructive actions
  • Use more than 3 action buttons
  • Choose action button colors for purely aesthetic reasons—use the color variant that matches the situation

Accessibility #

Keyboard navigation #

Keys Description
enter or space Open the associated closed modal when focus is on a trigger button.
tab Move focus to the next focusable element. If focus is on the last focusable element inside the modal, move focus to the first focusable element inside the modal. Tabbing should never move focus outside the modal while it is open.
shift + tab Move focus to the previous focusable element. If focus is on the first focusable element inside the modal, move focus to the last focusable element inside the modal. Tabbing should never move focus outside the modal while it is open.
escape Close the modal unless it has the data-rvt-modal-dialog attribute.

JavaScript #

  • Select the modal element, not the trigger button. The methods described below are attached to the element with the data-rvt-modal attribute.
  • A trigger button is optional if you are using JavaScript to show the modal. There are situations where a modal is only triggered using JavaScript, such as a warning dialog that appears just before a session times out. In these cases, you can omit the trigger button. Make sure to return the user’s focus to a sensible place after calling the close() method.
Method Description
open() Opens the modal
close() Closes the modal
focusTrigger() Sets focus to the modal’s associated trigger button
focusModal() Sets focus to the modal element
Event Description Details object properties
rvt:modalOpened Emitted when a modal is opened
rvt:modalClosed Emitted when a modal is closed