Modal
Modal component used to display new content outside of the flow of the pages regular content. When active, the regular page content cannot be scrolled.
To use a modal, you must add a data-modal attribute to an element containing the modal's classname (Typically a js prefix class, to seperate JavaScript hooks from style hooks). This element is typically referred to as the 'trigger element', and on click, activates the modal.
When a model opens and closes, respective open and close events are fired on the modal element, allowing you to trigger your own behaviour.
Source
Contributors
- Overview
- Options
- Methods
- Events
- Theming
Table of contents
Base
Modifiers
Base
Standard modal component
My Modal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna odio, luctus vitae eleifend non, rhoncus vitae nisi. Morbi nec elementum libero. Donec pulvinar quam in varius ultrices. Cras interdum consectetur lectus. Curabitur a volutpat odio, id tristique sapien. Sed condimentum tellus at ultrices ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Modifiers
A list of modifiers for the modal component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
Sizes
You can change the width of the modal by using size modifiers. Modifier classes exist for tiny, small, large and huge.
My Modal
I'm a regular modal
My Modal
I'm a tiny modal
My Modal
I'm a small modal
My Modal
I'm a large modal
My Modal
I'm a huge modal
You can modify the modal component by overriding certain JavaScript functionality through HTML data-attributes.
JavaScript
You can modify modal component functionality by adding the below data attributes. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)
| Name | |
|---|---|
| Name |
data-modal
|
| Description | |
| Description |
Adding this data attribute to an element and setting its value to your modal class, opens that modal on click. |
| Default | |
| Example | |
| Example |
My ModalLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna odio, luctus vitae eleifend non, rhoncus vitae nisi. Morbi nec elementum libero. Donec pulvinar quam in varius ultrices. Cras interdum consectetur lectus. Curabitur a volutpat odio, id tristique sapien. Sed condimentum tellus at ultrices ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Name | |
|---|---|
| Name |
data-modal-noescape
|
| Description | |
| Description |
Adding this data attribute to your modal means that once opened, it cannot be closed without a page refresh. Use for important journeys where modal content must be interacted with. |
| Default | |
| Example | |
| Example |
My ModalLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna odio, luctus vitae eleifend non, rhoncus vitae nisi. Morbi nec elementum libero. Donec pulvinar quam in varius ultrices. Cras interdum consectetur lectus. Curabitur a volutpat odio, id tristique sapien. Sed condimentum tellus at ultrices ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Name | |
|---|---|
| Name |
data-modal-confirm
|
| Description | |
| Description |
Add this to your modal component and when the user attempts to close it, a browser prompt will ask them if they're sure. You can customise the message by setting it as the value of the data attribute. |
| Default | |
| Example | |
| Example |
My ModalLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna odio, luctus vitae eleifend non, rhoncus vitae nisi. Morbi nec elementum libero. Donec pulvinar quam in varius ultrices. Cras interdum consectetur lectus. Curabitur a volutpat odio, id tristique sapien. Sed condimentum tellus at ultrices ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. My ModalLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut urna odio, luctus vitae eleifend non, rhoncus vitae nisi. Morbi nec elementum libero. Donec pulvinar quam in varius ultrices. Cras interdum consectetur lectus. Curabitur a volutpat odio, id tristique sapien. Sed condimentum tellus at ultrices ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.
See JavaScript API for more information and a list of shared, global methods.
open
Opens the target modal.
evo('.js-my-modal').modal('open');
close
Closes the target modal.
evo('.js-my-modal').modal('close');
/*
If the modal has a data-no-escape attribute, preventing the modal from being closed,
you can pass a 'bypassNoEscape' boolean to override this.
*/
evo('.js-my-modal').modal('close', {
bypassNoEscape: true
});
This component has bespoke events which trigger automatically on certain actions. You can hook into these using event listeners to run your own custom code.
Typically, most events are fired from the block level class (eg:- c-tabs), however some may fire from element level classes (eg:- c-tabs__item). In practice, this usually doesn't matter as these element level events will bubble upwards and trigger any listeners on the block element. When this happens, you can get a reference to the element via the target property of the event object.
Events List
| Name | Description |
|---|---|
|
Fires when the modal is opened. |
|
Fires when the modal is closed. |
Example code snippet showing how you can set up an event listener.
const element = document.querySelector('.c-my-component');
element.addEventListener('eventName', (e) => {
console.log('my event has fired');
// Access event details object, if it exists
console.log(e.details);
// Access the element the event was fired from
console.log(e.target);
});
You can theme the modal component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.
Below is a list of theme variables and their default values.
Theme Variables
| Theme Variables | Default |
|---|---|
$component-modal-focus-color |
primary |