Overlay

Demo

Usage

<!-- Set "id" and "data-overlay" to the same value -->
<div class="c-overlay" id="test-overlay" data-overlay data-url="testurl1" aria-hidden="true" aria-labelledby="test-overlay-title" role="dialog" tabindex="-1">
	<div class="inner">
		<button class="overlay-close" aria-label="Close"></button>
		<h2 id="test-overlay-title">Overlay</h2>
		<p><a href="">Sed quis</a> enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
		<p>Sed quis enim sed dolor ultricies congue. Nam fermentum ultricies tellus. Donec et feugiat urna. Vestibulum cursus mollis iaculis. Etiam lacinia magna vitae velit scelerisque volutpat.</p>
	</div>
</div>

<!-- Video overlay. Set "data-overlay-type" to "video" -->
<div class="c-overlay video" id="video-overlay" data-overlay data-overlay-type="video" data-url="testurl2" aria-hidden="true" role="dialog" tabindex="-1">
	<div class="inner">
		<button class="overlay-close" aria-label="Close"></button>
		<div class="video-embed" id="video-embed">
			<iframe src="https://player.vimeo.com/video/288903774" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
		</div>
		<div tabindex="0"></div>
	</div>
</div>

// Initialize for all elements in the DOM
Overlay.setup();

// Initialize for elements in a NodeList or Array
Overlay.setup(document.querySelectorAll(".elements"));

// Initialize for one element
new Overlay(document.querySelector("#element"));

Using overlay with the history API

// Replace first state with current url
history.replaceState({ url: window.location.url }, null, window.location.url);

// Intialize overlay with history set to true
var overlay = new Overlay(document.querySelector("#test-overlay"), {
	history: true
});

// Reopen overlay when popstate event is triggered
window.addEventListener("popstate", e => {
	if(e.state.url) {
		overlay.open(false);
	}
});