Unobtrusive javascript to add an overlay banner

If you have to add an overlay to a site, here is a fast way to do it with an…

November 7, 2011

If you have to add an overlay to a site, here is a fast way to do it with an unobtrusive javascript. Add this file to your site, just before the closing body tag, and customize the overlay() function inside the js file.

This code adds a div to cover your page with an opaque layer (you can customize the color and the opacity in the css, it’s the ovContainer0 div).

After the opaque layer which made unclickable and opaque the page, it’s inserted another div over it, which is not opaque and is used to center the overlay and contain the desidered HTML (your banner or anything else). Inside this div (which is called ovContainer) there is also another div (ovBox) that is, finally, used to contain the button whit an X to close it (ovClose) and your code. The ovBox div is dinamycally centered vertically.

You can customize the CSS of the opaque layer and the overlay box, probably you will never need to customize the CSS of the ovContainer.

Here is the function that overlay the layer that you have to customize inside the overlay.js file:

function overlay() {
	// CUSTOMIZE CSS
	ov_css (
		"#ovContainer0 {background-color:#FFF;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; "+
		"opacity: .70;filter: alpha(opacity=70);-ms-filter: \"alpha(opacity=70)\";-khtml-opacity: .70;-moz-opacity: .70;}"+
		"#ovContainer {background-color:transparent;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; }"+
		"#ovBox { position:relative; width:500px; min-height:150px; border:1px solid #FF9900; background-color:#FFFFCC; }"+
		"#ovContainer > #ovBox { position:fixed; }"+
		"#ovBox #ovClose { display:block; position:absolute; top:10px;right:10px;margin:5px;  padding:3px; border:1px solid #FF9900; font:12px arial; text-transform:uppercase; text-align:center; color:#000; background-color:#FFCC66; text-decoration:none; }"
	);
	// CUSTOMIZE HTML and GO!
	ov_add(
		"<a href='http://www.ecomondo.com/' target='_blank'><img src='/web/common/img/BANNER.jpg'/>"
	);
}

Download here the overlay.js file soure or use the minified version here.

You can see an example here.

Author

I'm a software engineer, an everyday web developer and a maker. I usually build sites with PHP, within or without WordPress. I build Internet of Things with Arduino and ESP8266. I'm the founder of Rockit.it and Dailybest.it and I'm actually the Chief Technical Officer of Better Days web agency.

Recommended

Refresh a Google Adsense banner with Javascript

Often bloggers and site owners use galleries to have a greater number of pages, adding pages means adding clicks. Each…

November 9, 2013

How to capture enter key pressed in a form (JavaScript)

Suppose you have a login form and you want to send the form when user press enter on his keyboard…

February 16, 2010

Fix html tags, close tags, repair bad quotes and more

This class can solve many problems coming from user generated html content or to fix html content before making some…

February 3, 2010

OnKeyUp Fix Alphanumerical Chars

When you have an html form and you want only alphanumerical [a-z0-9] chars in your input, you can use this…

November 10, 2009

Add Internet Explorer class to body to detect old browser

When you have clients that still uses an old browser, you need to handle it. This javascript function detects the…

February 27, 2017

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

April 20, 2016