Modals
Overlay messages that display information or prompt the user to make a decision.
Examples
Modals are designed to capture the user's attention by temporarily interrupting their workflow, to prompt a decision or display relevant information. There are standard modals and alert modals.
Usage
Modals dim the background content and focus the user's attention on the modal itself, where a dialogue, or interaction between the application and user takes place. They remain on screen until the user either acknowledges the modal content, answers the modal question, or dismisses it.
When used appropriately, modals can enhance the user experience by providing a focused, contextual interaction. However, be mindful of their design and use to avoid frustrating or confusing users.
Do:
- make sure it is the user that initiates the modal interaction
- use a modal when you need to interrupt the user's workflow temporarily to prompt a decision, display content, or engage in a focused interaction without navigating to a separate page
- use modals sparingly as they are intentionally disruptive to the user and can lead to distractions, potentially causing users to lose track of their tasks or even discouraging them from continuing
- use for important warnings, for example, as a method to prevent or correct critical errors
- ensure they have a maximum of two actions, one of which must be a confirming action, and the other a dismissing action
- allow users to close the modal without any obligation to perform a specific action
- place the primary action on the right-hand side
Avoid:
- using modals for non-essential information that is not related to the current workflow
- using modals when asking to make a decision that requires additional sources of information to be consulted that are not visible in the modal view
- scrolling content within the modal where possible
- putting too much information or too many options in a single modal, keep it focused on a specific task or message
- using any buttons other than the primary and default button styles
References
Nielsen Norman Group
Modal & Nonmodal Dialogs: When (& When Not) to Use Them
Close without saving
Are you sure you want to close this form?
Any information you have entered will be lost!
Close without saving
Are you sure you want to close this form?
Any information you have entered will be lost!
<turas-button button-style="CloseForm" button-opens-modal-id="markd3">Close without saving</turas-button>
<turas-modal modal-id="markd3" modal-title="Close without saving">
<turas-modal-body>
<p>Are you sure you want to close this form?</p>
<p><strong>Any information you have entered will be lost!</strong></p>
</turas-modal-body>
<turas-modal-footer>
<turas-button button-closes-modal>No, return to form</turas-button>
<turas-button button-type="Hyperlink" button-style="Primary" href="">Yes, close without saving</turas-button>
</turas-modal-footer>
</turas-modal>
<button class="btn btn-white " type="button" data-bs-toggle="modal" data-bs-target="#markd3">Close without saving</button>
<div class="modal modal-info " id="markd3" tabindex="-1" role="dialog" aria-labelledby="markd3Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="markd3Label">Close without saving</div>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span class="fa-regular fa-x"></span></button>
</div>
<div class="modal-body">
<p>Are you sure you want to close this form?</p>
<p><strong>Any information you have entered will be lost!</strong></p>
</div>
<div class="modal-footer">
<button class="btn btn-default " type="button" data-bs-dismiss="modal">No, return to form</button>
<a href="" class="btn btn-primary ">Yes, close without saving</a>
</div>
</div>
</div></div>
Delete vaccination record
Are you sure you want to delete Sandy Smith’s vaccination record?
Warning: this can not be undone!
<turas-button button-opens-modal-id="markd" button-style="Danger">Delete vaccination record</turas-button>
<turas-modal modal-id="markd" modal-title="Delete vaccination record" modal-style="Danger">
<turas-modal-body>
<p>Are you sure you want to delete Sandy Smith’s vaccination record?</p>
<p><strong>Warning: this can not be undone!</strong></p>
</turas-modal-body>
<turas-modal-footer>
<turas-button button-closes-modal>No, cancel</turas-button>
<turas-button button-type="Hyperlink" button-style="Primary" href="">Yes, delete vaccination record</turas-button>
</turas-modal-footer>
</turas-modal>
<button class="btn btn-danger " type="button" data-bs-toggle="modal" data-bs-target="#markd">Delete vaccination record</button>
<div class="modal modal-danger " id="markd" tabindex="-1" role="dialog" aria-labelledby="markdLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="markdLabel">Delete vaccination record</div>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span class="fa-regular fa-x"></span></button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete Sandy Smith’s vaccination record?</p>
<p><strong>Warning: this can not be undone!</strong></p>
</div>
<div class="modal-footer">
<button class="btn btn-default " type="button" data-bs-dismiss="modal">No, cancel</button>
<a href="" class="btn btn-primary ">Yes, delete vaccination record</a>
</div>
</div>
</div></div>
Generate new password
The user [emailaddress@nhs.scot] accesses Turas using their O365 details, generating a new password will only reset their Turas password. This action will not reset their NHS Scotland O365 password.
Are you sure you want to generate a new password?
<turas-button button-opens-modal-id="markd2" button-style="Primary">Generate new password</turas-button>
<turas-modal modal-id="markd2" modal-title="Generate new password" modal-style="Warning">
<turas-modal-body>
<p>The user [emailaddress@nhs.scot] accesses Turas using their O365 details, generating a new password will only reset their Turas password. This action will not reset their NHS Scotland O365 password.</p>
<p>Are you sure you want to generate a new password?</p>
</turas-modal-body>
<turas-modal-footer>
<turas-button button-closes-modal>No, close</turas-button>
<turas-button button-type="Hyperlink" button-style="Primary" href="">Yes, generate new password</turas-button>
</turas-modal-footer>
</turas-modal>
<button class="btn btn-primary " type="button" data-bs-toggle="modal" data-bs-target="#markd2">Generate new password</button>
<div class="modal modal-warning " id="markd2" tabindex="-1" role="dialog" aria-labelledby="markd2Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="markd2Label">Generate new password</div>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span class="fa-regular fa-x"></span></button>
</div>
<div class="modal-body">
<p>The user [emailaddress@nhs.scot] accesses Turas using their O365 details, generating a new password will only reset their Turas password. This action will not reset their NHS Scotland O365 password.</p>
<p>Are you sure you want to generate a new password?</p>
</div>
<div class="modal-footer">
<button class="btn btn-default " type="button" data-bs-dismiss="modal">No, close</button>
<a href="" class="btn btn-primary ">Yes, generate new password</a>
</div>
</div>
</div></div>
Setting up NDP Developer Portal
If this is your first sign in it might take up to a minute to get everything ready.
<turas-button button-opens-modal-id="spinner1">Static loading screen</turas-button>
<turas-modal modal-id="spinner1" modal-is-static modal-title="Setting up NDP Developer Portal" modal-style="Load">
<turas-modal-body>
<p>If this is your first sign in it might take up to a minute to get everything ready.</p>
</turas-modal-body>
</turas-modal>
<button class="btn btn-default " type="button" data-bs-toggle="modal" data-bs-target="#spinner1">Static loading screen</button>
<div class="modal modal-load " id="spinner1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="spinner1Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="spinner1Label">Setting up NDP Developer Portal</div>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span class="fa-regular fa-x"></span></button>
</div>
<div class="modal-body">
<p>If this is your first sign in it might take up to a minute to get everything ready.</p>
</div>
</div>
</div></div>
Optional parameters
- modal-id - the unique ID of the modal (use this instead of the HTML ID attribute)
- modal-title - the modal title
- button-opens-modal-id - use on a button to trigger the modal
- button-closes-modal - use on the button to close the modal
- modal-is-static - when backdrop is set to static, the modal will not close when clicking outside it
- modal-style - change or specify the default Info style. For example, Info, Danger, Warning, Load
- modal-show-immediately - show the modal on page load
- hide-modal-close-button - hides the modal 'x' dismiss icon
- additional-classes - additional CSS classes
Accessibility status
This component is partially compliant with the WCAG 2.2 standard because of the following non compliances:
- screen reader does not read title of modal when launched
Testing
- check keyboard navigation to ensure the navigation does not trap focus and that all interactive elements within the modal are accessible with a keyboard , for example any links or buttons
- check focus is visible
- when launching modal make sure focus is on the modal and that you cannot interact with any other part of the page while its open
- check the esc button closes the modal
- when closing the modal check that focus returns to the button which was used to launch it
- test navigation with screen readers to ensure content is announced as expected within the modal
Developer considerations
- make sure that modals can be closed with the esc button
- make sure focus is inside the modal once it has been launched
- make sure focus returns to the previous action once the modal has been closed
