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.
How does this work?
- Load the JS class and CSS style by putting the code that follows, into the "head" tag of the document.
- 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.
- 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.
<script src="/itpoverlay.js" type="text/javascript"></script>
<link href="/style.css" type="text/css" rel="stylesheet" />
<body id="body_id">
<script>
var overlay = new ItpOverlay("body_id");
overlay.show();
</script>By show() you put overlay on the element. To remove it must use the method hide().
Demo
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.
Download
 ITPOverlay.zip | [JavaScript class and examples] | 11 Kb |
Share this post
