This is a JavaScript class that you can use to blur parts of the page. You are able to put fog on the entire page. You can also darken individual elements.

I use it to show loading image while perform AJAX request.

Overlay loading

How does this work?

  1. Load the JS class and CSS style by putting the code that follows, into the "head" tag of the document.
    <script src="/itpoverlay.js" type="text/javascript"></script>
    <link href="/style.css" type="text/css" rel="stylesheet" />
  2. Put the id of the element that you want to overlay. It is necessary because the class gets the element by id, and you will have to set it.
    <body id="body_id">
  3. Create an object by specifying the id of the element on which you wish to darken. In this case, I darken the body tag, and it will hide the page.
var overlay = new ItpOverlay("body_id");;

By show() you put overlay on the element. To remove it must use the method hide().


On the demo page, you will find several ways for using. You will see how to use it with AJAX request and full page overlaying.

An archive with a source code of the overlay script.

Share this post

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Free Subscription

You can get the latest publication via RSS, Twitter or Facebook. And I can also deliver last news to you for free via Email:

RSS subscription Find us on Facebook Google+ page Follow me