Modal-light – a lightweight universal modal (deprecated syntax)

This is a lightweight modal dialog with minimal markup designed to be as easy to implement as possible.

The only markup required is this:

<div modal-light-state="hidden" class="modal-light">
    <aside tabindex="-1" role="dialog" aria-labelledby="label" class="modal-light__content">

    // Modal contents goes here
    
    </aside>
</div>

Please note: this must be the last node within the body tag to maintain the z-index context. Also the aria-labelledby attribute's value should match the ID of a descriptive element from the modal markup.


To show a modal simply change its modal-light-state attribute value to visible and to hide it, change it to hidden

JavaScript API

If you are using the UCASDesignFramework javascript we have implemented this in UCASDesignFramework.modal_light and provided a predefined mechanism along with a simple API to enable you to show and hide modal dialogs.

To use this predefined method you will need your modal markup as described above. For this example we are going to give it an ID to allow us to target it with our JavaScript API.

<div id="modal-1" modal-light-state="hidden" class="modal-light">
    <aside tabindex="-1" role="dialog" aria-labelledby="label" class="modal-light__content">
        <h2 id="label">Modal content</h2>
        <p>Sit cupiditate dignissimos suscipit quam voluptas vitae. eum cumque sed odio natus mollitia cupiditate.</p>
        <a role="button" href="#" class="button" modal-light-close>Close Modal</a>
    </aside>
</div>

To trigger this modal we just need an element with the attribute modal-light-trigger which also has the attribute modal-light-id set to the ID of the modal we wish to open.

<a role="button" href="#" class="button" modal-light-trigger modal-light-id="modal-1">Trigger Lightweight Modal</a>
Trigger Lightweight Modal

API methods

The API has several built-in methods.

UCASDesignFramework.modal_light.init() // Initialise modal_light plugin.

This is called when the page is loaded and attaches all event listeners and handles the open/close modal events.


UCASDesignFramework.modal_light.destroy() // Destroy modal_light plugin.

This removes all event listeners and closes any open modals, effectively disabling modal behaviour. To re-enable simply call UCASDesignFramework.modal_light.init()


UCASDesignFramework.modal_light.showModal("modal-id") // Displays the modal that has the given ID.

This shows the modal who's ID matches the passed string argument. If no argument is passed, nothing will happen.


UCASDesignFramework.modal_light.hideModal() // Hide top open modal.
UCASDesignFramework.modal_light.hideModal("modal-id") // Hide modal with given ID.

This will hide the top most open modal. You may also supply an ID string as an argument which will close a specific modal.

Size variations

The modal's default size is suitable for most simple dialogue boxes with simple actions. If more complex modals are required there are two larger size variations available.

Medium add the class modal-light--medium to the outer div.

Trigger medium modal

Large add the class modal-light--large to the outer div.

Trigger large modal

This is a matrix of the modal widths at each breakpoint.

Large Medium Small
modal-light 33% 66% 95%
modal-light modal-light--medium 66% 95% 95%
modal-light modal-light--large 95%* 95%* 95%*
*sets both width and height

Accessibility

There are a number of accessibility issues for modals.

Close button

The close button needs to be highly visible and immediately recognisable as a close button. It should also be keyboard focusable.

Focus

Focus should be shifted to the modal and trapped within it when visible and shifted back to the triggering element when hidden.

Escape key closing

The escape key should close the modal.

If you are using the Design Framework's JavaScript modal_light then the above are handled for you.

Nesting

If you need a modal to trigger another modal simply follow the same pattern. The modals will appear above each other in reversed source order.

Please note: If you don't specify the modal to close then the uppermost (that is the last modal in the source order) will be closed.