Modal Window
An accessible modal window used to display critical information.
Projects /
Projects /
An accessible modal window used to display critical information.
Modal windows are dialogs used to display relevant information without losing the context of the page. They should be used with caution because they interrupt the user flow by disabling the main content.
To connect the modal to its trigger (e.g., button), make sure the ID value of the first one is equal to the aria-controls value of the second one.
Apply one of the following classes to the .modal element to set the entry animation of the modal window:
modal--animate-fade: animate the opacitymodal--animate-scale: scale up the modal contentmodal--animate-translate-up: translate up the modal contentmodal--animate-translate-down: translate down the modal contentmodal--animate-translate-right: translate right the modal contentmodal--animate-translate-left: translate left the modal contentmodal--animate-slide-up: translate up the modal content by 100% of its height (use for content moving in/out the viewport)modal--animate-slide-down: translate down the modal content by 100% of its heightmodal--animate-slide-right: translate right the modal content by 100% of its widthmodal--animate-slide-left: translate left the modal content by 100% of its widthThe animations will be disabled if the prefers-reduced-motion option is equal to "reduce" on the user's device.
If you need to open a modal element without a trigger element (e.g., you want to show the modal as a consequence of user actions), you can use the openModal custom event.
Here's how you can use this custom event:
function openModal(element) {
var event = new CustomEvent('openModal');
element.dispatchEvent(event);
};
var modal = document.getElementsByClassName('js-modal');
//open first modal available in your page
openModal(modal[0]);You can also pass the element you want the focus to be moved to when the modal element is closed:
function openModal(element, focusElement) {
var event = new CustomEvent('openModal', { detail: focusElement });
element.dispatchEvent(event);
};You can use the closeModal event if you need to close the modal without using a close button:
function closeModal(element) {
var event = new CustomEvent('closeModal');
element.dispatchEvent(event);
};
var modal = document.getElementsByClassName('js-modal');
//close first modal available in your page
closeModal(modal[0]);You can listen to the opening/closing of a modal element using the two custom events modalIsOpen and modalIsClose that are emitted when the modal is open/close.
var modal = document.getElementsByClassName('js-modal')[0];
modal.addEventListener('modalIsOpen', function(event){
// modal is open
// event.detail is the element that triggered the modal opening
});
modal.addEventListener('modalIsClose', function(event){
// modal is close
});When the modal window is open, the focus is automatically moved to the first focusable element inside the modal.
If you want to specify the element the focus should be moved to, you can add the data-modal-first-focus attribute to the .js-modal element and set its value equal to a unique selector of the element you want to focus. If the element is not focusable, the focus will be moved to the first focusable child.
When the modal is open, you may want to change the overflow behavior of a different element (e.g., the body element) to prevent the underlying content from scrolling while the modal is open.
To do that, add a data-modal-prevent-scroll attribute equal to a unique CSS selector of the element to modify. For example, to target the <body>:
<!-- prevent the body from scrolling when the modal is open -->
<div class="modal" id="modal-name-1" data-modal-prevent-scroll="body">
<!-- modal content here -->
</div>If your modal is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.
Once the dynamic content has been added to the page, initialize it using the Modal object:
var modal = document.getElementsByClassName('modal')[0];
new Modal(modal);
