Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

v5 modals

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 id="ExampleModal01" data-modal-state="hidden" class="modal-container">
  <div tabindex="-1" role="dialog" aria-labelledby="ExampleModal01Label" class="modal">
  <!-- Content goes here. -->
  </div>
</div>

See the examples below for more complex modals.

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 in response to a click event on a trigger button, pass the event to UCASDesignFramework.modal.showModal(). Buttons that are marked up with data-modal-trigger and data-modal-id attributes will have a click handler that will do this added when UCASDesignFramework.modal.init() is run.

For example:

<button class="button" data-modal-trigger data-modal-id="ExampleModal01">Example 01</button>

Alternatively, call UCASDesignFramework.modal.showModal() and pass its ID and an element to return focus to (usually the trigger) when closing the modal.

API methods

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

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


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

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


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

This will display the modal with the matching ID. If no argument is passed, nothing will happen.

If the user is using a keyboard for navigation, it will return focus to the returnFocusElement on closing the modal.


UCASDesignFramework.modal.hideModal() // Hide top open modal.
UCASDesignFramework.modal.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.


Modals can also be referenced to make it easier to show/hide in code.

myLovelyModal = new UCASDesignFramework.modal.Modal("modal-1")
myLovelyModal.show()
myLovelyModal.hide()

Small modal

<div id="ExampleModal01" data-modal-state="hidden" class="modal-container">
  <div role="dialog" aria-labelledby="ExampleModal01Label" class="modal modal--small">
    <header class="modal__header">
      <h2 id="ExampleModal01Label">Example <span class="heading-alternative">01</span></h2>
    </header>
    <div class="modal__content">
      <p>Quibusdam debitis fugiat quia aut a. animi ut autem est dolores mollitia sed officiis suscipit sit tempore laborum itaque consequatur. ut quos maiores pariatur dolor voluptates ipsa eos nemo ducimus non. nobis recusandae ullam eius ab quasi id minima sit. omnis qui dolor accusantium incidunt molestias delectus non a officiis sunt odio qui et eos. quia maxime vel laudantium velit alias accusamus ut voluptatem soluta quia.</p>
    </div>
    <footer class="modal__footer">
      <div class="buttons">
        <div class="buttons__group">
          <!-- NOTE: form attribute doesn't work in IE, will require JavaScript. -->
          <button class="button button--primary" type="submit" form="example-modal-01-form">Update</button>
          <button class="button button--secondary" type="button" data-modal-close>Cancel</button>
        </div>
      </div>
    </footer>
  </div>
</div>

Login prompt modal

<!-- START login prompt modal component -->
<div id="LoginPromptModal" data-modal-state="hidden" class="modal-container modal-container--scroll">
  <div role="dialog" aria-labelledby="LoginPromptModalLabel" class="modal modal--small">
    <div class="modal__image modal__image--login"></div>
    <div class="modal__content modal__content--login">
      <h2 class="h4" id="LoginPromptModalLabel">Sign in <span class="heading-alternative">to favourite</span></h2>
      <div class="grid grid--center">
        <div class="grid__item">To add to your favourites you will need to sign in. If you don't have an account, please register to use all the features available.</div>
      </div>
    </div>
    <footer class="modal__footer">
      <div class="buttons">
        <div class="buttons__group">
          <a class="button button--primary" href="#">Sign in</a>
          <a class="button button--secondary" href="#" data-modal-close>Cancel</a>
        </div>
      </div>
      <p><small>Don't have an account yet? <a href="#">Sign up</a></small></p>
    </footer>
  </div>
</div>
<!-- END login prompt modal component -->

Accessibility

These example modals attempt to follow the modal accessibility guidelines from the W3C.

If testing with NVDA, you may find it is overly verbose. This is a known issue: NVDA repeats dialog content twice in Browsers

Focus

When using the keyboard, the modal open script will try to set focus on the following items in order:

  • An element with a data-modal-focus attribute (see "Bank information" example)
  • The first focusable element in .modal__content (see "Add choice" example)
  • The first element in .modal__content (see ".modal--error" example)

Example 01

Small modal

UCASDesignFramework.modal.showModal('ExampleModal01')

Example 02

Small modal with lots of content

UCASDesignFramework.modal.showModal('ExampleModal02')

Example 03

Medium modal

UCASDesignFramework.modal.showModal('ExampleModal03')

Example 04

Uses theme-inverse.

UCASDesignFramework.modal.showModal('ExampleModal04')

Example 05

Uses theme-inverse. No header.

UCASDesignFramework.modal.showModal('ExampleModal05')

Search filters

UCASDesignFramework.modal.showModal('SearchFiltersModal')

Add choice

UCASDesignFramework.modal.showModal('AddChoiceModal')

Bank information

UCASDesignFramework.modal.showModal('BankInformationModal')

Application error

UCASDesignFramework.modal.showModal('ApplicationErrorModal')

.modal--error

UCASDesignFramework.modal.showModal('ErrorModal')

.modal--success

UCASDesignFramework.modal.showModal('SuccessModal')

.modal--warning

UCASDesignFramework.modal.showModal('WarningModal')

.modal--information

UCASDesignFramework.modal.showModal('InformationModal')

.modal--icon

UCASDesignFramework.modal.showModal('IconModal')

Login prompt

If this is needed on non .v5 pages add .v5-modal to body instead.

UCASDesignFramework.modal.showModal('LoginPromptModal')