Simple Overlay

Simple example of an overlay using jQuery.

by mlhDevelopment

HTML

<a href='#'>Click here to grey out the page</a><br />
<h1>Hello World</h1>
<h1 style='color: blue'>Blue Text</h1>
<button>Try to click</button><br />
<a href='http://google.com'>I dare you</a>
<br />
Activate scrolling...<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Hi!

CSS

.overlay
{
    position: absolute;
    left: 0;
    top: 0;
    background: Silver;
    z-index: 5000;
}

JavaScript

$("a").click(function() {
    $("<div class='overlay' />")
        .css({ 
            opacity: 0.2, 
            width: $(document).width(),
            height: $(document).height()
        })
        .appendTo("body");
});