EvoToolkit - v3.7.2 (Changelog)

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

Luke Harrison
  • 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.

<button class='c-button' data-modal='js-my-modal-standard'>Open Modal</button>
<div class='c-modal js-my-modal-standard'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>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.</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

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

<button class='c-button u-mb-small' data-modal='js-my-modal-basic'>Open Modal</button>
<button class='c-button u-mb-small' data-modal='js-my-tiny-modal'>Open Tiny Modal</button>
<button class='c-button u-mb-small' data-modal='js-my-small-modal'>Open Small Modal</button>
<button class='c-button u-mb-small' data-modal='js-my-large-modal'>Open Large Modal</button>
<button class='c-button' data-modal='js-my-huge-modal'>Open Huge Modal</button>

<div class='c-modal js-my-modal-basic'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>I'm a regular modal</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

<div class='c-modal c-modal--tiny js-my-tiny-modal'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>I'm a tiny modal</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>


<div class='c-modal c-modal--small js-my-small-modal'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>I'm a small modal</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

<div class='c-modal c-modal--large js-my-large-modal'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>I'm a large modal</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

<div class='c-modal c-modal--huge js-my-huge-modal'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>I'm a huge modal</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

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 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.

<button class='c-button' data-modal='js-my-modal-data'>Open Modal</button>
<div class='c-modal js-my-modal-data'>
	<div class='c-modal__wrapper'>
		 <div class='c-modal__title-wrapper'>
				<h1 class='c-modal__title'>My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class='c-modal__box'>
				<div class='c-modal__content'>
					<div class='o-box u-p-small'>
						 <p>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.</p>
						 <div class='u-align-center'>
							 <button class='c-button js-close-modal'>
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>
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.

If you absolutely must close one of these modals for design reasons, you can pass a bypassNoEscape boolean as an option to the close method.

Default
Example
Example

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.

<button class="c-button" data-modal="js-my-modal-noescape">Open Modal</button>
<div class="c-modal js-my-modal-noescape" data-modal-noescape>
	<div class="c-modal__wrapper">
		 <div class="c-modal__title-wrapper">
				<h1 class="c-modal__title">My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class="c-modal__box">
				<div class="c-modal__content">
					<div class="o-box u-p-small">
						 <p>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.</p>
						 <div class="u-align-center">
							 <button class="c-button js-close-modal">
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>
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 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.

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.

<button class="c-button u-mb-small" data-modal="js-my-modal-confirm">Open Modal</button>
<div class="c-modal js-my-modal-confirm" data-modal-confirm>
	<div class="c-modal__wrapper">
		 <div class="c-modal__title-wrapper">
				<h1 class="c-modal__title">My Modal</h1>
				<button class="c-modal__close js-close-modal"><svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg></button>
		 </div>
		 <div class="c-modal__box">
				<div class="c-modal__content">
					<div class="o-box u-p-small">
						 <p>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.</p>
						 <div class="u-align-center">
							 <button class="c-button js-close-modal">
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

<button class="c-button" data-modal="js-my-modal-confirm-2">Open Modal (Custom Message)</button>
<div class="c-modal js-my-modal-confirm-2" data-modal-confirm="Are you quitting on me?">
	<div class="c-modal__wrapper">
		 <div class="c-modal__title-wrapper">
				<h1 class="c-modal__title">My Modal</h1>
				<svg class="c-modal__close js-close-modal" tabindex="0"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
		 </div>
		 <div class="c-modal__box">
				<div class="c-modal__content">
					<div class="o-box u-p-small">
						 <p>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.</p>
						 <div class="u-align-center">
							 <button class="c-button js-close-modal">
							 	Close
							 	<svg class="c-button__icon c-button__icon--small c-button__icon--right"><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#close"></use></svg>
							</button>
						</div>
					</div>
				</div>
		 </div>
	</div>
</div>

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

open

Fires when the modal is opened.

close

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