Guidance
Modals are a type of pop-up window that overlays the current page and require users to focus on specific information or take action before they can return to the website or application. Modals are made up of the following parts:
- Modal header: Title of the modal and the close button on the top right.
- Modal body: Content area of the modal window that will scroll once its height
exceeds
50vh - Modal footer (optional): Only use when modal contains action buttons.
Modal windows interrupt the workflow and must be used sparingly to avoid causing frustration or confusion. You can use a modal window to:
- Get explicit user confirmation for an action such as deleting an item or acccount.
- Provide help information or tutorials that help users complete their tasks.
- Ensure the user is focused on a specific piece of content or task.
- Allow a user to input information or perform an action without navigating away from the view.
- View content (like an image, document, or video) without navigating away from the current screen.
- Provide additional information that doesn't fit, clutters or complicates the UI when included directly.
Do
- Use modals sparingly
- Use modals for short, one-time interactions
- Always include the close button
- Give modals a clear title and description
- Limit the number of actions that can be taken within the modal (submit, cancel/close)
Don’t
- Use modals for long pieces of content that would make more sense as a separate page
- Remove or move the close button in the top right
- Use generic titles in your modal
- Use modals for small definitions where a tooltip would suffice
Where to place modal content in your code
-
General placement:
We recommend placing the modal content (
.gnb-modal) before the closing</main>tag. Although it will work anywhere, this helps with organization and readability. -
Outside forms:
Place your modal content outside of any
<form>elements. This prevents the close button from triggering a page reload, which is a known issue in ASP.net - Accordions: If you are launching a modal from within an accordion make sure to place the modal content after the closing tag of the accordion container. Placing it inside the accordion can cause z-index issues, making the accordion labels appear above the modal overlay.
You'll need to include gnb-modals-1.0.0.js for this component at the bottom of your page before the closing body tag.
Modal
You can use a modal without a footer to show help information for an application field.
You can launch modal windows using a button or a link:
HTML code
<!-- Button -->
<button class="modal-button gnb-btn" data-target="modal" aria-haspopup="dialog" aria-controls="modal">Launch modal</button>
<!-- Link -->
<a tabindex="0" data-target="modal" aria-haspopup="dialog" aria-controls="modal" class="modal-button info">Launch modal</a>
<!-- Modal -->
<div class="gnb-modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-description">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal"><span class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title">Modal title</h2>
</div>
<div class="gnb-modal-body" id="modal-description">
<p>
This is a modal that doesn't have a footer, suitable for simple messages.
</p>
</div>
</dialog>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>
Field label tooltip modal
HTML code
<!-- Field with tooltip label -->
<label for="first-name"><a tabindex="0" data-target="modal-address" aria-haspopup="dialog" aria-controls="modal-address" class="modal-button info">Service address</a></label>
<input type="text" name="first-name" id="first-name" />
<!-- Field info modal dialog - place this OUTSIDE any <form> element in your page -->
<div class="gnb-modal" id="modal-address" role="dialog" aria-modal="true" aria-labelledby="modal-title-address" aria-describedby="modal-description-address">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-address"><span class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-address">Service address</h2>
</div>
<div class="gnb-modal-body" id="modal-description-address">
<p>
Your service must be installed at an address in New Brunswick to qualify for this rebate.
</p>
</div>
</dialog>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>
Modal with action buttons
When your modal has actions for a user to take, place the action buttons in the modal footer and ensure the primary action is on the left. See button guidance for examples of button pairings for interactions.
Launch modal with action buttons
HTML code
<!-- Button -->
<button class="modal-button gnb-btn" data-target="modal-with-actions" aria-haspopup="dialog" aria-controls="modal-with-actions">Launch modal</button>
<!-- Link -->
<a tabindex="0" data-target="modal-with-actions" aria-haspopup="dialog" aria-controls="modal-with-actions" class="modal-button info">Launch modal</a>
<!-- Modal with action buttons -->
<div class="gnb-modal" id="modal-with-actions" role="dialog" aria-modal="true" aria-labelledby="modal-title-with-actions" aria-describedby="modal-description-with-actions">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-with-actions"><span class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-with-actions">Modal with actions title</h2>
</div>
<div class="gnb-modal-body" id="modal-description-with-actions">
<p>
This modal window has two actions a user can take. Action buttons must be placed in the <code>.gnb-modal-footer</code> with the primary action on the left.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-with-actions">Submit</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-with-actions">Cancel</button>
</div>
</dialog>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>
Supporting more than one modal
To support more than one modal on a page differentiate them by id in your HTML.
HTML code
<!-- First modal button -->
<button class="modal-button gnb-btn" data-target="modal-1" aria-haspopup="dialog" aria-controls="modal-1">Launch modal 1</button>
<!-- First modal link -->
<a tabindex="0" data-target="modal-1" aria-haspopup="dialog" aria-controls="modal-1" class="modal-button info">Launch modal 1</a>
<!-- First modal -->
<div class="gnb-modal" id="modal-1" role="dialog" aria-modal="true" aria-labelledby="modal-title-1" aria-describedby="modal-description-1">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-1"><span class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-1">Modal 1 title</h2>
</div>
<div class="gnb-modal-body" id="modal-description-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet turpis venenatis, rhoncus ligula vel, fermentum odio.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-1">Submit</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-1">Cancel</button>
</div>
</dialog>
</div>
<!-- Second modal button -->
<button class="modal-button gnb-btn" data-target="modal-2" aria-haspopup="dialog" aria-controls="modal-2">Launch modal 2</button>
<!-- Second modal link -->
<a tabindex="0" data-target="modal-2" aria-haspopup="dialog" aria-controls="modal-2" class="modal-button info">Launch modal 2</a>
<!-- Second modal -->
<div class="gnb-modal" id="modal-2" role="dialog" aria-modal="true" aria-labelledby="modal-title-2" aria-describedby="modal-description-2">
<dialog>
<button class="gnb-btn-close close-modal-button" data-target="modal-2"><span class="sr-only">Close modal window</span><i class="fa-solid fa-xmark"></i></button>
<div class="gnb-modal-header">
<h2 id="modal-title-2">Modal 2 title</h2>
</div>
<div class="gnb-modal-body" id="modal-description-2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet turpis venenatis, rhoncus ligula vel, fermentum odio.
</p>
<p>
Curabitur vel risus vel massa finibus auctor. Vivamus lacus est, venenatis eu augue sit amet, suscipit consequat tellus. Nulla gravida sapien nibh, at sodales eros vestibulum pharetra. Sed pretium, leo in pretium tempor, magna ex consequat nulla, nec interdum eros eros sed lacus.
</p>
<p>
Donec non vulputate lacus. Cras pellentesque mi in sem blandit, quis convallis nulla pharetra. In eget lectus sed ligula facilisis laoreet. Phasellus non ante felis.
</p>
<p>
Curabitur vel risus vel massa finibus auctor. Vivamus lacus est, venenatis eu augue sit amet, suscipit consequat tellus. Nulla gravida sapien nibh, at sodales eros vestibulum pharetra. Sed pretium, leo in pretium tempor, magna ex consequat nulla, nec interdum eros eros sed lacus.
</p>
</div>
<div class="gnb-modal-footer">
<button type="button" class="gnb-btn close-modal-button" data-target="modal-2">Submit</button>
<button type="button" class="gnb-btn-secondary close-modal-button" data-target="modal-2">Cancel</button>
</div>
</dialog>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-modals-1.0.0.js"></script>