Advanced Search

Unobtrusive Javascript Overlay

/ Published in: JavaScript
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function overlay() {
  2.     // CUSTOMIZE CSS
  3.     ov_css (
  4.         "#ovContainer0 {background-color:#FFF;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; "+
  5.         "opacity: .70;filter: alpha(opacity=70);-ms-filter: \"alpha(opacity=70)\";-khtml-opacity: .70;-moz-opacity: .70;}"+
  6.         "#ovContainer {background-color:transparent;position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:10000; }"+
  7.         "#ovBox { position:relative; width:500px; min-height:150px; border:1px solid #FF9900; background-color:#FFFFCC; }"+
  8.         "#ovContainer > #ovBox { position:fixed; }"+
  9.         "#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; }"
  10.     );
  11.     // CUSTOMIZE HTML and GO!
  12.     ov_add(
  13.         "<a href='http://www.ecomondo.com/' target='_blank'><img src='/web/common/img/BANNER.jpg'/>"
  14.     );
  15. }

URL: http://www.barattalo.it/2011/11/07/unobtrusive-javascript-to-add-an-overlay-banner/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.