Example 01
Small modal
UCASDesignFramework.modal.showModal('ExampleModal01')
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.
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()
<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>Voluptatibus enim natus voluptates in et cumque ducimus voluptatibus. quisquam fugiat ullam nihil quis in eum voluptatibus iure aut ut quia sit. repellat omnis maxime harum natus aliquam voluptas. voluptatem fugiat error sint animi quo velit voluptates dicta. hic ut omnis nisi temporibus est perspiciatis. reprehenderit nihil eum harum. eligendi saepe dolores dolorem et.</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>
<!-- 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 -->
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
When using the keyboard, the modal open script will try to set focus on the following items in order:
data-modal-focus
attribute (see "Bank information" example).modal__content
(see "Add choice" example).modal__content
(see ".modal--error" example)Small modal
UCASDesignFramework.modal.showModal('ExampleModal01')
Small modal with lots of content
UCASDesignFramework.modal.showModal('ExampleModal02')
Medium modal
UCASDesignFramework.modal.showModal('ExampleModal03')
Uses theme-inverse
.
UCASDesignFramework.modal.showModal('ExampleModal04')
Uses theme-inverse
. No header.
UCASDesignFramework.modal.showModal('ExampleModal05')
UCASDesignFramework.modal.showModal('SearchFiltersModal')
UCASDesignFramework.modal.showModal('AddChoiceModal')
UCASDesignFramework.modal.showModal('BankInformationModal')
UCASDesignFramework.modal.showModal('ApplicationErrorModal')
UCASDesignFramework.modal.showModal('ErrorModal')
UCASDesignFramework.modal.showModal('SuccessModal')
UCASDesignFramework.modal.showModal('WarningModal')
UCASDesignFramework.modal.showModal('InformationModal')
UCASDesignFramework.modal.showModal('IconModal')
If this is needed on non .v5
pages add .v5-modal
to body instead.
UCASDesignFramework.modal.showModal('LoginPromptModal')
Quas iusto autem et facere recusandae non ut neque nihil temporibus aut nostrum ut dicta. nam delectus ipsa laborum hic deleniti quibusdam ut nihil sit. facere ab dicta accusamus iure aut quo ex et. aperiam et mollitia suscipit voluptatum facilis et quas ab cupiditate itaque.
Totam labore impedit reprehenderit amet et illo voluptas officiis distinctio ut consequatur aliquid reiciendis. repellendus et sit ea odit sit eveniet nobis dolores. modi a minus aspernatur doloremque iure omnis et. eligendi maiores at omnis ut. nostrum ipsum enim dolores perspiciatis aut eveniet occaecati architecto distinctio facere et alias rerum quas. ut sunt voluptates voluptatem Quisquam suscipit in libero eum quia sed qui ut aliquid. et quisquam ut quo in mollitia minima quibusdam et cumque assumenda consequatur. nihil pariatur qui sed cum. ipsa autem nulla quisquam reiciendis ducimus cupiditate est aliquam aut sequi. ducimus aspernatur cupiditate consequatur mollitia earum ipsum modi suscipit minima accusamus Sint repellendus libero laudantium quia eveniet a recusandae et earum reprehenderit nostrum omnis blanditiis. praesentium veritatis adipisci non aut eius necessitatibus iste unde. alias qui dignissimos voluptas. voluptatibus consequuntur necessitatibus quia ullam non quam accusamus odio maxime sit dolores quo asperiores sint. ut voluptas iure quisquam occaecati et labore in voluptas voluptates autem. et sapiente at eveniet ipsa consequatur quo nesciunt perferendis aut nihil Excepturi eos autem vel est iusto consequatur omnis quidem omnis. velit enim alias et ipsum temporibus et. labore maiores aliquid deleniti asperiores id similique nesciunt deleniti quam quia provident Sequi fuga aliquam sit voluptatem qui eveniet laborum. nihil et eaque nulla quidem amet laborum similique molestias ut tempore pariatur eum. voluptatem explicabo dolore cupiditate consequatur. sed laborum voluptate et animi molestiae quis sequi minima harum. magni sint aut aut iste quae dolorem consequatur voluptas blanditiis ullam sint occaecati veniam quam. et aut molestiae et sapiente error nostrum inventore nesciunt. aspernatur eius blanditiis voluptatum itaque voluptatum quis facere ducimus dolor ut alias quisquam similique assumenda Eligendi qui dolorem quam quos dolores. id repellendus officiis quod distinctio asperiores est eaque dolor. repellat ea earum ea earum atque recusandae sit ipsum repellat sunt excepturi provident non. quas perferendis quam velit adipisci harum eius quisquam molestiae porro tempore. inventore quidem ut atque. accusantium neque voluptas exercitationem deserunt et et suscipit. non dignissimos sed perferendis dolores qui impedit consectetur aliquid aut Est aut magni id temporibus occaecati ipsam. fugit cumque dolorem earum doloremque. et neque quos error et reiciendis necessitatibus. et qui ad repellat similique eligendi recusandae quas dolorem esse ratione assumenda. quos sit ipsum quia consequatur natus a qui molestiae esse odit aliquid nulla eum. doloremque magnam animi id. animi quidem minus suscipit sit earum excepturi mollitia tempora et repudiandae est Dicta quia enim fuga error quia exercitationem facere cum velit est adipisci voluptatem. doloribus aspernatur quasi ad inventore. quod et voluptas consectetur iste quibusdam expedita explicabo nesciunt. ea corrupti rem error voluptatem.
ExampleModal01 comes before ExampleModal03 in the source order but should appear above in terms of z-index.
Here are your UCAS status codes – they’ll make opening a student bank account quick and easy.
4-Digit Code: 7064
16-Digit Code: 2051787148672738
Once your place has been confirmed you will be able to use them to quickly open your student bank account.