There is a lot of code posted in the question (and even more in the demo) that doesn't seem to have anything to do with the question being asked. This is more or less all you need for a simple overlay;
/* color with alpha channel */
background-color: rgba(0, 0, 0, 0.7); /* 0.7 = 70% opacity */
/* stretch to screen edges */
Make sure this is a child (direct descendant) of <body>, or that there are no positioned ancestors. (The term "positioned" refers to an element with a position value other than static)
// rather than "body", you will want to tweak this selector
$(".overlay").toggle(); // show/hide the overlay
Here's a demo including a popup with the overlay: http://jsfiddle.net/5aWhE/19/
how do I do it if I have access only to JS on the website? I am a third party service provider to a website and I have access only to JS. Can I do something like, temp = $('body').html() temp = '<div id="overlay">' + temp + '<div>' $('body').html(temp) and then inserting the CSS to head of the page using jquery append but this doesnt seem to work.
@lemarc $('body').html(anything) sounds like a horrible idea, as it would overwrite the entire page... you probably want something like $(document.body).prepend(yourHtml) instead. It's also entirely possible to insert css <link>s in the <head> dynamically using .append() although not needed as you can attach styles directly to the element using .css(). If you can't get it working, try posting a new question about it.
I figured out the method, I just appended the div to the body and modified the css using jquery. By the way you should consider using window.body.scrollHeight for height of the overlay or else it will only appear for the visible part of the window.
@lemarc yes, that's a good idea. you could also use position: fixed; instead of absolute.