Overlay

Details
Written by: Stanko Milosev
Category: HTML5
Hits: 9926

In this article I gave an example of HTML5 dialog tag, and in this article I will extend that example with an overlay.

Basically overlay means one div which covers whole page, and with that trick we are disabling user to click anywhere.

CSS looks like this:

.overlay {
	position: absolute;
	height: 100%;
	width: 100%;
}

Then we will need just one div, like:
<div class="overlay"></div>
Whole HTML looks like this:

<!DOCTYPE html>
<html>

	<head>
		<style>
			.overlay {
				position: absolute;
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	
	<body>
		<div id=lorem>Lorem ipsum</div>
		
		<dialog class="modal">
			<p>This is da dialog!</p>
			<button id="close">Close</button>
		</dialog>
		<button id="show">Open Dialog!</button>
		
	</body>
	
	<script type="text/javascript">	
		var dialog = document.querySelector('dialog');
		var origHTML = document.querySelector('#lorem').innerHTML;
		document.querySelector('#show').onclick = function() {
			document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;
			dialog.show();
		};
		document.querySelector('#close').onclick = function() {
			document.querySelector('#lorem').innerHTML = origHTML;
			dialog.close();
		};
	</script>
	
</html>

Here notice how I am adding div tag with overlay class:

document.querySelector('#lorem').innerHTML = '<div class="overlay"></div>' + document.querySelector('#lorem').innerHTML;