Skip to content

Instantly share code, notes, and snippets.

@Ultrabenosaurus

Ultrabenosaurus/overlay.html

Last active December 14, 2015 09:18
Show Gist options
  • Save Ultrabenosaurus/5063818 to your computer and use it in GitHub Desktop.
Save Ultrabenosaurus/5063818 to your computer and use it in GitHub Desktop.
Download ZIP
A super-simple overlay system with a message box.
Raw
overlay.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Simple Overlay</title>
<style>
#overlay{
position:fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: black;
opacity: 0.8;
z-index: 9998;
}
#message{
position: fixed;
opacity: 1.0;
z-index: 9999;
background-color: white;
}
</style>
</head>
<body>
<div id="overlay" style="display: none;"></div>
<div id="message" style="display: none;">
<h2>I Am A Title</h2>
<p>I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. </p>
<p>I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. I am some text. </p>
<p><a href="javascript:close_message('message');">Close</a></p>
</div>
<div>
<a href="javascript:show_message('message');" id="show_warning">Show Warning</a>
</div>
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus neque mollis augue accumsan id ultrices neque scelerisque. Maecenas neque dolor, placerat sit amet iaculis ut, eleifend non ipsum. Morbi tempor aliquet turpis, sed aliquam mauris pharetra ut. Donec arcu tortor, porttitor non tincidunt in, luctus ut sapien. In ut tellus quis metus tempus accumsan nec at justo. Nullam sed dolor id lorem placerat pretium at sit amet magna. Maecenas tincidunt, nunc non mattis varius, tellus enim fermentum mauris, non pretium purus purus quis mauris. Phasellus eleifend augue ut diam congue aliquam. Nulla imperdiet, eros vel molestie cursus, turpis mi bibendum dui, id iaculis velit neque sit amet ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis blandit metus non arcu imperdiet vestibulum. In at dui vitae sem viverra molestie. Donec tortor magna, facilisis nec sagittis at, luctus vel eros. Suspendisse massa lorem, rutrum sed pretium sed, ultrices vel ipsum.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sit amet venenatis massa. Donec sed enim arcu, vel egestas quam. Proin ut eros justo. Maecenas id quam et nunc interdum dictum. Nulla facilisi. Aliquam non erat at nisl faucibus vulputate nec ac arcu. In mollis mollis metus, quis ornare erat congue vitae. Fusce a tellus nec ipsum egestas venenatis.</p>
<p>Cras hendrerit, felis non tempor posuere, turpis eros dapibus mauris, nec pharetra urna risus ut eros. Cras ornare ipsum neque, venenatis cursus dolor. Duis sit amet purus eget lorem venenatis eleifend. Cras sollicitudin ornare tellus nec cursus. Nulla imperdiet laoreet nunc ut tristique. Integer ullamcorper vulputate velit eget faucibus. Pellentesque est nunc, vehicula eget rutrum a, cursus a sapien. Vivamus bibendum eleifend eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam interdum libero a massa aliquam elementum condimentum nisi convallis. Aliquam massa leo, faucibus sit amet dignissim ut, tincidunt et odio. Suspendisse tristique convallis diam id interdum. Sed porttitor gravida orci, ut commodo nulla adipiscing ut. Curabitur vestibulum, felis eu eleifend bibendum, ipsum est feugiat velit, sit amet mollis nibh velit eu elit. Nam sed arcu vitae ipsum hendrerit molestie. Integer urna ante, euismod non ultricies ac, ullamcorper nec elit.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non justo dolor, vel eleifend mi. Etiam sagittis bibendum urna in varius. Pellentesque id purus at mauris iaculis adipiscing. Maecenas interdum laoreet sem eu tincidunt. Praesent cursus malesuada nibh quis sodales. Integer egestas pretium pretium. Sed pretium, nulla luctus lobortis elementum, est leo lacinia mauris, sed lacinia purus est nec eros. Mauris dapibus fringilla mi, ut ornare nisl auctor id. Etiam mattis enim eu sapien blandit gravida.</p>
<p>Quisque arcu enim, iaculis non placerat vel, tincidunt quis tortor. In faucibus porta quam quis dignissim. Aliquam in luctus ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent lacinia metus vel risus pharetra posuere. Duis elementum metus dui, nec sollicitudin felis. Vivamus bibendum felis in nibh dictum a hendrerit nisi luctus. Pellentesque volutpat adipiscing sodales. Pellentesque ut augue malesuada mauris ultrices volutpat sit amet imperdiet augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis porttitor massa. Donec est turpis, consectetur quis varius pretium, gravida vitae ante. Praesent ut nulla lacus, eget pellentesque metus.</p>
</div>
</body>
</html>
Raw
overlay.js
function show_message(message){
element = document.getElementById(message);
var page_size = get_browser_size();
var elem_size = [element.offsetWidth, element.offsetHeight];
document.getElementById('overlay').setAttribute('style', 'display: block;');
element.setAttribute('style', 'display: block;'+"left:"+((page_size[0]/2)-(elem_size[0]/2))+";top:"+((page_size[1]/2)-(elem_size[1]/2))+";");
}
function close_message(message){
document.getElementById(message).setAttribute('style', 'display: none;');
document.getElementById('overlay').setAttribute('style', 'display: none;');
}
function get_browser_size(){
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
return [winW, winH];
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment