Modals

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

Copy


    <turas-button 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 without saving?</p>
            <p>Any changes made will not be saved!</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>

Copy


    <button class="btn btn-default " 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 without saving?</p>
            <p>Any changes made will not be saved!</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>

Copy


    <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>

Copy


    <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>

Copy


    <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>

Copy


    <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>

Copy


    <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>

Copy


    <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

Header (application)

Navigation (application)

Examples

Usage

References

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Research user journeys

Was this page helpful?