Demo Section

Each variation will be presented in the following section.

Bild in Lightbox

HTML5 Video in Lightbox

Ext. embedded Video in Lightbox (YouTube mit deutschen Texten)

Ext. embedded Video in Lightbox (YouTube mit engl. Texten)

Ext. embedded Video in Lightbox (Vimeo mit deutschen Texten)

Ext. embedded Video in Lightbox (Vimeo mit engl. Texten)

YouTube Video in Lightbox

VIMEO Video in Lightbox

LRZ-PLayer Video in Lightbox

HTML in Lightbox

HTML_error Page in Lightbox

Bildgalerie in Lightbox

Personen in Lightbox

Readme

Overlay

Description

It represents an overlay module. This module is responsible to create an overlay without predefining any inner overlay template.

It should be used by other modules to display their content in an overlay.

JIRA

Usage

The overlay component will be initialized without any markup reference. Next to that, it’s only purpose is to open and close itself and display provided content.

How do you work with the overlay?

It is really simple by using the publish/subscribe pattern. The overlay listens to:

EVENTS.overlay.open
EVENTS.overlay.close.

That means you only need to trigger the event and provide the content as a parameter.

Example

Let’s display an image in our overlay component. As long as all requirements are fulfilled you can execute the following:

Veams.Vent.publish(Veams.EVENTS.overlay.open, { content: '<img src="https://via.placeholder.com/400x200" />' });

That’s it.

`overlay-usage.hbs`

Here you will find an onclick event which is just inlined to open the overlay. It is an easy way to show you a working example.

But we suggest to use @veams/component-cta for triggering global events out of the markup.

Requirements

@veams/core - Veams Core Framework.
@veams/query or jquery - Veams Query or jQuery.
@veams/component - Veams Component.

Installation

Installation with Veams

veams install component overlay

veams -i c overlay

JavaScript Options

The module gives you the possibility to override default options:

Option	Type	Default	Description
classes.open	String	`'is-open'`	Define the open class to open the overlay.
classes.noScroll	String	`'isnt-scrollable'`	Define the class that prevents scrolling of the page in the background.
selectors.closeBtn	String	`'[data-js-item="overlay-close"]'`	Define the element for close button.
selectors.figureImage	String	`'[data-js-item="figure-image"]'`	Define the element for figure image.
selectors.footer	String	`'[data-js-item="footer"]'`	Define the element for footer.
selectors.header	String	`'[data-js-item="header"]'`	Define the element for header.
selectors.main	String	`'[data-js-item="main"]'`	Define the element for main.
selectors.overlay	String	`'[data-js-item="overlay"]'`	Define the element for overlay.
selectors.regionContent	String	`'[data-js-item="overlay-content"]'`	Define the element for region content.
selectors.skipLinks	String	`'[data-js-item="skip-links"]'`	Define the element for skip links.
templates.default	String	`'OVERLAY__CONTENT'`	Define the template for overlay content.

Templates

overlay-usage.hbs

<h2>Bild in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>HTML5 Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "video": { "videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg", "videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"}, "caption": {"captionHeadline":"HTML5 Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "4:00 Min."}, {"text": "25.03.2018"}, {"text": "@motionworks"}, {"link": {"linkText": "Interner Link zu einer Detailseite", "href": "#", "type": "internal"}}]}  }'
	 class="teaser-single__link">Lightbox öffnen</button>
</div><br />
<br />
<h2>Ext. embedded Video in Lightbox (YouTube mit deutschen Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "extplayer": {"youtube":"YouTube","id": "mM5_T-F1Yn4","format": "4_3","dslink":"http://www.zuendfunk.de","txtde":"de","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (YouTube mit engl. Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "extplayer": {"youtube":"YouTube","id": "mM5_T-F1Yn4","format": "4_3", "txten":"en","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (Vimeo mit deutschen Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "extplayer": {"vimeo":"Vimeo","id": "311983548","format": "16_9","txtde":"de","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Vimeo Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (Vimeo mit engl. Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "extplayer": {"vimeo":"Vimeo","id": "311983548","format": "16_9","txten":"en","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Vimeo Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>YouTube Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "youtube": {"id": "mM5_T-F1Yn4","format": "4_3"}, "caption": {"captionHeadline":"VIMEO Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button>
</div>
<br/>
<br/>
<h2>VIMEO Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "vimeo": {"id": "311983548","format": "16_9"}, "caption": {"captionHeadline":"VIMEO Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button>
</div>
<br />
<br />
<h2>LRZ-PLayer Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "lrzplayer": {"id": "2e46f9af-7bae-4c17-be40-bf234ef105df","format": "16_9"}, "caption": {"captionHeadline":"LRZ Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }'
	 class="teaser-single__link">Lightbox öffnen</button>
</div>
<br />
<br />
<h2>HTML in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "html": {"htmlCssContent": "", "htmlContent": "test <p>test2</p>"}}' class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>HTML_error Page in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "html": {"htmlCssContent": "", "htmlContent": "<div class=\"c-error-page--lightbox\" data-css=\"c-error-page\"><div class=\"grid__container\"><div class=\"grid__row\"><div class=\"error-page__content\"><h2 class=\"error-page__headline\">Sorry, this page is not available in english<\/h2><div class=\"error-page__description\"><p><b>Would you like to know more about LMU?<\/b><\/p><\/div><nav class=\"error-page__navigation-area\"><div class=\"c-link-button--default is-start error-page__navigation\" data-css=\"c-link-button\"><a class=\"link-button__link\" href=\"#\">Start page english<\/a><\/div><div class=\"c-link-button--default is-sitemap error-page__navigation\" data-css=\"c-link-button\"><a class=\"link-button__link\" href=\"#\">zur Sitemap<\/a><\/div><\/nav><\/div><div class=\"error-page__watermark\" aria-hidden=\"true\"><div class=\"error-page__watermark_bg\" aria-hidden=\"true\">&nbsp;<\/div><\/div><\/div><\/div><\/div>"}}'
	 class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>Bildgalerie in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "slider": { "imgitems": [{"img": {"id":"1","src": "https://via.placeholder.com/800x532", "alt": "Alternative text that describes the image", "format_l":"1600w", "format_l_url":"https://via.placeholder.com/1600x1067", "format_xl":"3200w", "format_xl_url":"https://via.placeholder.com/3200x2133"}},{"img": {"id":"2","src": "https://via.placeholder.com/800x532", "alt": "Alternative ", "format_l":"1600w", "format_l_url":"https://via.placeholder.com/1600x1067", "format_xl":"3200w", "format_xl_url":"https://via.placeholder.com/3200x2133"}}], "descitems": [{"desc": {"id":"1", "text":"beispieltext1", "copy":"copyright1"}},{"desc": {"id":"2", "text":"beispieltext2", "copy":"copyright2"}}]}}'
	 class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>Personen in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true"  aria-expanded="false" data-js-item="overlay-handler-cta"
	 data-content='{ "person": { "personname": "Prof. Dr. Dr. Heribert Maierhoffer", "organizationunit": "Organisationseinheit", "jobfunction": "Funktion", "jobdescription": "Jobbeschreibung<br>Unterbezeichnung Job", "personinfo": "Hier dann alles zu der entsprechenden Person.<br>Umbruchtest<br>Hier steht dann der längere Infotext der auch in der Lightbox angezeigt wird.", "office": "Dezernat Office", "room": "Stock 4. 404", "street": "Martiusstr.4", "city":"80638 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkClasses": "is-external","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank"}}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de","linkTarget": "_blank"}},{"content": {"linkText": "persönliche Website","linkClasses": "is-external","linkHref": "https://www.lmu.de","linkTarget": "_blank"}},{"content": {"linkText": "+49 (0)8956565656","linkClasses": "is-phone","linkHref": "tel:+4908923232314","linkTarget": "_blank"}},{"content": {"linkText": "Weitere Informationen","linkClasses": "is-download","linkHref": "https://www.lmu.de","linkTarget": "_blank"}}],"phone":"+49(0)8933298657","fax":"+49(0)8933298656","img":{"imgSrc":"https://via.placeholder.com/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://via.placeholder.com/300x300","format_l":"600w","format_l_url":"https://via.placeholder.com/600x600","format_xl":"1200w","format_xl_url":"https://via.placeholder.com/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"}}}'
	 class="teaser-single__link">Lightbox
		öffnen</button>
</div>

Currently there is no Data file!

Styles

_overlay.scss

/* ===================================================
BLOCK: OVERLAY
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */

// Animation Variables
$overlay-duration: 300ms !default;
$overlay-ease-method: ease !default;

$overlay-color-bg: #000 !default;
$overlay-color-btn-close: #fff !default;

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-overlay"] {
	/*
	Standard styles
	----------------------- */
	left: 0;
	position: fixed;
	opacity: 0;
	overflow: hidden;
	top: 0;
	visibility: hidden;
	z-index: 9999;
	height: 0;

	@include print() {
		display: none;
	}

	/*
	Modifiers
	----------------------- */
	&.is-open {
		height: 100%;
		opacity: 1;
		transition: opacity $overlay-duration $overlay-ease-method;
		visibility: visible;
		width: 100%;
	}

	/*
	Wrapper
	----------------------- */
	.overlay__wrapper {
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 9999;
	}

	/*
	CTA
	----------------------- */
	.overlay__close {
		@include reset-btn();

		position: absolute;
		height: 20px;
		right: 20px;
		top: 20px;
		width: 20px;
		z-index: 9997;
		cursor: pointer;
		font-size: .0001rem;

		&:hover,
		&.a11y-focus-key {

			&::before {
				opacity: 1;
			}

			&::after {
				opacity: 0;
			}
		}

		&::before,
		&::after {
			@include pseudo();
			@include centering(hv);

			transition: opacity $animation-duration-std * 2
				$animation-easing-std;
		}

		&::before {
			@include sprites-icon-close-white();

			opacity: 0;
		}

		&::after {
			@include sprites-icon-close-green60();

			opacity: 1;
		}

		@include hcm() {
			font-size: 1.2rem;
			width: auto;
			color: $color-dark;

			&::before {
				background-image: none;
			}

			&::after {
				background-image: none;
			}
		}
	}

	/*
	Content
	----------------------- */
	.overlay__content {
		display: block;
		height: 100%;
		margin: auto;
		position: relative;
	}

	.overlay__inner {
		@include centering(hv);

		max-height: 100%;
		//width: auto;
		width: 100vw;
		margin: 0 auto;
		vertical-align: top;

		@include bp($bp-tablet-p) {
			width: 80vw;
		}
	}

	.overlay__html {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*
	Mask
	----------------------- */
	.overlay__mask {
		background: rgba($overlay-color-bg, .97);
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9998;
		width: 100%;
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-cta--overlay {
	cursor: pointer;
}

Scripts

overlay.js

/**
 * Represents an overlay module.
 *
 * This module is responsible to create an overlay
 * without predefining any inner overlay template.
 *
 * It should be used by other modules
 * to display their content in an overlay.
 *
 * @module Overlay
 * @version v1.0.0
 *
 * @author Sebastian Fitzner
 */
import $ from 'jquery';
import Component from '@veams/component';
import FocusTrap from '../../../utilities/focus-trap/scripts/focus-trap';

const Template = `
<div id="overlay" class="c-overlay--default" data-css="c-overlay" data-js-item="overlay" aria-hidden="true">
	<div class="overlay__wrapper">
		<button class="overlay__close" data-js-item="overlay-close">Schließen</button>
		<div class="overlay__content">
			<div class="overlay__inner" data-js-item="overlay-content">
			</div>
		</div>
	</div>
	<div class="overlay__mask" data-js-item="overlay-mask"></div>
</div>`;

class Overlay extends Component {
	/**
	 * General Properties
	 */

	// Elements in Markup
	$body = $('body');
	$header = $(this.options.selectors.header);
	$main = $(this.options.selectors.main);
	$footer = $(this.options.selectors.footer);
	$skipLinks = $(this.options.selectors.skipLinks);
	_template = Template;
	focusTrap = null;

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			classes: {
				noScroll: 'isnt-scrollable',
				open: 'is-open'
			},
			selectors: {
				closeBtn: '[data-js-item="overlay-close"]',
				figureImage: '[data-js-item="figure-image"]',
				footer: '[data-js-item="footer"]',
				header: '[data-js-item="header"]',
				main: '[data-js-item="main"]',
				overlay: '[data-js-item="overlay"]',
				regionContent: '[data-js-item="overlay-content"]',
				skipLinks: '[data-js-item="skip-links"]'
			},
			templates: {
				default: 'OVERLAY__CONTENT'
			}
		};

		super(obj, options);
	}

	/** =================================================
	 * GETTER & SETTER
	 * ================================================ */

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0',
			vc: true,
			mod: false // set to true if source was modified in project
		};
	}

	// set and get overlay template
	get template() {
		return this._template;
	}

	set template(tpl) {
		this._template = tpl;
	}

	// set and get infos if overlay is created
	get overlayCreated() {
		return this._overlayCreated;
	}

	set overlayCreated(bol) {
		this._overlayCreated = bol;
	}

	// set and get infos if overlay is open
	get isOpen() {
		return this._isOpen;
	}

	set isOpen(bol) {
		this._isOpen = bol;
	}

	// set and get overlay element after creation
	get $overlay() {
		return this._$overlay;
	}

	set $overlay(el) {
		this._$overlay = el;
	}

	// set and get close button after creation
	get $closeBtn() {
		return this._$closeBtn;
	}

	set $closeBtn(el) {
		this._$closeBtn = el;
	}

	// set and get content region
	get $regionContent() {
		return this._$regionContent;
	}

	set $regionContent(el) {
		this._$regionContent = el;
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */
	get subscribe() {
		return {
			'{{context.EVENTS.overlay.open}}': 'render',
			'{{context.EVENTS.resize}}': 'onResize'
		};
	}

	/**
	 * Bind global events
	 *
	 * Listen to open and close events
	 */
	bindEvents() {
		// Close overlay with ESC
		$(window).on(this.context.EVENTS.keyup, e => {
			if (e.keyCode == 27 && this.isOpen) {
				this.close();
			}
		});
	}

	/**
	 * Bind local events
	 */
	bindLocalEvents() {
		let fnClose = this.close.bind(this);

		// Local events
		this.$closeBtn.on(this.context.EVENTS.click, fnClose);
	}

	/**
	 * Resize handler
	 *
	 * @param {Object} e - Event object
	 */
	onResize(e) {
		// if overlay is open reset inner width
		if (this.open) {
			this.setInnerWidth();
		}
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	/**
	 * Pre-Render the overlay and save references
	 */
	preRender() {
		// Append FE template
		this.$body.append(this.template);

		// Set some references
		this.$overlay = $(this.options.selectors.overlay);
		this.$closeBtn = $(this.options.selectors.closeBtn, this.$overlay);
		this.$regionContent = $(this.options.selectors.regionContent, this.$overlay);

		this.focusTrap = new FocusTrap({
			el: this.$overlay[0],
			namespace: 'FocusTrap',
			context: this.context
		});

		this.focusTrap.create();
		this.focusTrap.didMount();

		this.overlayCreated = true;
		this.bindLocalEvents();
	}

	/**
	 * Render the overlay
	 */
	render(obj) {
		let content = this.renderTemplate(this.options.templates.default, obj.data);

		// save CTA instance if available
		this.ctaInstance = obj.ctaInstance;

		this.$regionContent.html(content);

		// update focus trap (focusable elements)
		this.focusTrap.update();

		// Open overlay
		this.open();
	}

	/** =================================================
	 * CUSTOM OVERLAY METHODS
	 * ================================================= */

	setInnerWidth() {
		this.$overlayImage = this.$overlay.find(this.options.selectors.figureImage);

		this.$regionContent.css('width', '');

		if (!this.$overlayImage.length) {
			return;
		}

		if (this.$overlayImage[0].complete) {
			this.$regionContent.css('width', this.$overlayImage[0].width + 'px');
		} else {
			this.$overlayImage.on('load', (e, currentTarget) => {
				this.$regionContent.css('width', currentTarget.width + 'px');
				this.$overlayImage.off('load');
			});
		}
	}

	/**
	 * Open Overlay
	 */
	open() {
		this.$overlay.addClass(this.options.classes.open);
		this.isOpen = true;

		// activate focus trap
		this.focusTrap.activate();

		this.scrollTop = this.$body[0].scrollTop;
		this.$body.addClass(this.options.classes.noScroll);

		this.setInnerWidth();

		setTimeout(() => {
			this.$overlay.attr('aria-hidden', false);
			this.$skipLinks.attr('aria-hidden', true);
			this.$header.attr('aria-hidden', true);
			this.$main.attr('aria-hidden', true);
			this.$footer.attr('aria-hidden', true);
			this.$closeBtn[0].focus();
		}, 0);
	}

	/**
	 * Close overlay
	 */
	close() {
		this.$overlay.removeClass(this.options.classes.open);
		this.isOpen = false;
		this.$overlay.attr('aria-hidden', true);
		this.$skipLinks.attr('aria-hidden', false);
		this.$header.attr('aria-hidden', false);
		this.$main.attr('aria-hidden', false);
		this.$footer.attr('aria-hidden', false);

		this.$body.removeClass(this.options.classes.noScroll);
		this.$body[0].scrollTop = this.scrollTop;

		// deactivate focus trap
		this.focusTrap.deactivate();

		if (this.ctaInstance) {
			this.ctaInstance.close();
			this.ctaInstance.el.focus();
		}

		this.$regionContent.empty();
	}
}

export default Overlay;

HTML Output

<h2>Bild in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "image": { "src": "https://via.placeholder.com/2000x1000", "altText": "Some alt text"}, "caption": {"captionHeadline": "Caption Headline", "captionContent": "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "© imageworks"}]} }'>Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>HTML5 Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "video": { "videoPoster": "http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg", "videoMp4": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "videoWebm": "http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"}, "caption": {"captionHeadline":"HTML5 Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."}, "metainfo": {"items": [{"text": "4:00 Min."}, {"text": "25.03.2018"}, {"text": "@motionworks"}, {"link": {"linkText": "Interner Link zu einer Detailseite", "href": "#", "type": "internal"}}]}  }' class="teaser-single__link">Lightbox öffnen</button>
</div><br />
<br />
<h2>Ext. embedded Video in Lightbox (YouTube mit deutschen Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "extplayer": {"youtube":"YouTube","id": "mM5_T-F1Yn4","format": "4_3","dslink":"http://www.zuendfunk.de","txtde":"de","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (YouTube mit engl. Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "extplayer": {"youtube":"YouTube","id": "mM5_T-F1Yn4","format": "4_3", "txten":"en","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Youtube Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (Vimeo mit deutschen Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "extplayer": {"vimeo":"Vimeo","id": "311983548","format": "16_9","txtde":"de","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Vimeo Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>Ext. embedded Video in Lightbox (Vimeo mit engl. Texten)</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "extplayer": {"vimeo":"Vimeo","id": "311983548","format": "16_9","txten":"en","img": {"imgAlt": "Beschreibungstextneu","imgTitle": "Copyright","format_s": "600w","format_s_url": "https://via.placeholder.com/600x300","format_m": "1200w","format_m_url": "https://via.placeholder.com/1200x600","format_l": "2400w","format_l_url": "https://via.placeholder.com/2400x1200"}}, "caption": {"captionHeadline":"Vimeo Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button><!-- XRamnH2D9Y0 -->
</div>
<br />
<br />
<h2>YouTube Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "youtube": {"id": "mM5_T-F1Yn4","format": "4_3"}, "caption": {"captionHeadline":"VIMEO Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button>
</div>
<br />
<br />
<h2>VIMEO Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "vimeo": {"id": "311983548","format": "16_9"}, "caption": {"captionHeadline":"VIMEO Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button>
</div>
<br />
<br />
<h2>LRZ-PLayer Video in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "lrzplayer": {"id": "2e46f9af-7bae-4c17-be40-bf234ef105df","format": "16_9"}, "caption": {"captionHeadline":"LRZ Video Headline","captionContent":"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."} }' class="teaser-single__link">Lightbox öffnen</button>
</div>
<br />
<br />
<h2>HTML in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "html": {"htmlCssContent": "", "htmlContent": "test <p>test2</p>"}}' class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>HTML_error Page in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "html": {"htmlCssContent": "", "htmlContent": "<div class=\"c-error-page--lightbox\" data-css=\"c-error-page\"><div class=\"grid__container\"><div class=\"grid__row\"><div class=\"error-page__content\"><h2 class=\"error-page__headline\">Sorry, this page is not available in english<\/h2><div class=\"error-page__description\"><p><b>Would you like to know more about LMU?<\/b><\/p><\/div><nav class=\"error-page__navigation-area\"><div class=\"c-link-button--default is-start error-page__navigation\" data-css=\"c-link-button\"><a class=\"link-button__link\" href=\"#\">Start page english<\/a><\/div><div class=\"c-link-button--default is-sitemap error-page__navigation\" data-css=\"c-link-button\"><a class=\"link-button__link\" href=\"#\">zur Sitemap<\/a><\/div><\/nav><\/div><div class=\"error-page__watermark\" aria-hidden=\"true\"><div class=\"error-page__watermark_bg\" aria-hidden=\"true\">&nbsp;<\/div><\/div><\/div><\/div><\/div>"}}' class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>Bildgalerie in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "slider": { "imgitems": [{"img": {"id":"1","src": "https://via.placeholder.com/800x532", "alt": "Alternative text that describes the image", "format_l":"1600w", "format_l_url":"https://via.placeholder.com/1600x1067", "format_xl":"3200w", "format_xl_url":"https://via.placeholder.com/3200x2133"}},{"img": {"id":"2","src": "https://via.placeholder.com/800x532", "alt": "Alternative ", "format_l":"1600w", "format_l_url":"https://via.placeholder.com/1600x1067", "format_xl":"3200w", "format_xl_url":"https://via.placeholder.com/3200x2133"}}], "descitems": [{"desc": {"id":"1", "text":"beispieltext1", "copy":"copyright1"}},{"desc": {"id":"2", "text":"beispieltext2", "copy":"copyright2"}}]}}' class="teaser-single__link">Lightbox
		öffnen</button>
</div>
<br />
<br />
<h2>Personen in Lightbox</h2>
<div data-js-module="overlay-handler">
	<button type="button" aria-haspopup="true" aria-expanded="false" data-js-item="overlay-handler-cta" data-content='{ "person": { "personname": "Prof. Dr. Dr. Heribert Maierhoffer", "organizationunit": "Organisationseinheit", "jobfunction": "Funktion", "jobdescription": "Jobbeschreibung<br>Unterbezeichnung Job", "personinfo": "Hier dann alles zu der entsprechenden Person.<br>Umbruchtest<br>Hier steht dann der längere Infotext der auch in der Lightbox angezeigt wird.", "office": "Dezernat Office", "room": "Stock 4. 404", "street": "Martiusstr.4", "city":"80638 München", "addressitems": [{"content": {"linkText": "Wegbeschreibung","linkClasses": "is-external","linkHref": "http://www.zuendfunk.de","linkTarget": "_blank"}}], "contactitems":[{"content": {"linkText": "Email schreiben","linkClasses": "is-mail","linkHref": "mailto:info@lmu.de","linkTarget": "_blank"}},{"content": {"linkText": "persönliche Website","linkClasses": "is-external","linkHref": "https://www.lmu.de","linkTarget": "_blank"}},{"content": {"linkText": "+49 (0)8956565656","linkClasses": "is-phone","linkHref": "tel:+4908923232314","linkTarget": "_blank"}},{"content": {"linkText": "Weitere Informationen","linkClasses": "is-download","linkHref": "https://www.lmu.de","linkTarget": "_blank"}}],"phone":"+49(0)8933298657","fax":"+49(0)8933298656","img":{"imgSrc":"https://via.placeholder.com/300x300","imgAlt":"Beschreibungstext","format_m":"300w","format_m_url":"https://via.placeholder.com/300x300","format_l":"600w","format_l_url":"https://via.placeholder.com/600x600","format_xl":"1200w","format_xl_url":"https://via.placeholder.com/1200x1200","sizes":"1vw, (min-width: 768px) 33.33333vw"}}}' class="teaser-single__link">Lightbox
		öffnen</button>
</div>

OVERLAY-USAGE (Standard Module )

src/app/shared/components/overlay/templates