Mask Control for Web Page Using Javascript

Today i want to discuss how to prepare or Loading a Mask in for Whole Web Page for a certain time interval.So that the User can not able to edit the Web page on that specific set of time Interval i.e.when the Page is in still Processing.

I think there is no such control in to Mask the whole page as it indicates that the Page is still Processing.But that's where the beauty of java script and css comes to handy to solve this type of Problems.

Advantages of Using the Mask control :

suppose a web page is in Processing for a longer period of time due to some written code for stopping and starting the services in the web page or even fetching the larger data from the database.In order restrict the User for performing an action in the Page for a stipulated period of time this Mask control will be Useful.

First of all we try to take a look how this Mask Editor Control looks like in real time thereafter we will look at the Code.

Loading image

In the Above picture i have a grid in that i have one link button as soon as i click the Link button i am showing some mask with dark color. so the user not able to edit the Web page until the Mask gets fade out as the page internally runs the code and give the Output.

for Designing these things we need to do these...

div id="MaskedDiv" class ="MaskedDiv"div
div id="ModalPopupDiv" align="center" class="ModalPopup"
img src="Images/pHHzT.gif" id="imgname"

Code for Javascript

function OpenModelPopup()
// document.getElementById('tdDisplayName').innerHTML = '';
// document.getElementById('txtName').value = '';

document.getElementById('ModalPopupDiv').style.visibility = 'visible';
document.getElementById('ModalPopupDiv').style.display = '';
document.getElementById('ModalPopupDiv') = Math.round((document.documentElement.clientHeight / 2) + document.documentElement.scrollTop) - 100 + 'px';
document.getElementById('ModalPopupDiv').style.left = '400px';

document.getElementById('MaskedDiv').style.display = '';
document.getElementById('MaskedDiv').style.visibility = 'visible';
document.getElementById('MaskedDiv') = '0px';
document.getElementById('MaskedDiv').style.left = '0px';
document.getElementById('MaskedDiv').style.width = document.documentElement.clientWidth + 'px';
document.getElementById('MaskedDiv').style.height = document.documentElement.clientHeight + 'px';
// window.setTimeout(CloseModelPopup, 5000);
window.setTimeout(CloseModelPopup, 8000);

function CloseModelPopup()
document.getElementById('MaskedDiv').style.display = 'none';
document.getElementById('ModalPopupDiv').style.display = 'none';

Css for this

visibility: hidden;
/* ieWin only stuff */
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../Images/loader.gif');

div.ModalPopup {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #CCCCCC;
/* set z-index higher than possible */
visibility: hidden;
color: Black;
border-style: solid;
border-color: #999999;
border-width: 1px;
width: 30px;
height :auto;

for those two divs i have two css classes.

The SetInterval will set the timeout of the Page for 8 seconds.Where the mask is going to appear 8 seconds.


The Grid Code looks like this...


Requirements :

Apart from this Code we need to have one loader.gif and one mask.gif find an attachment with this code.

If you want save these images right click and choose save image as....

Loading animated gif



Article by srirama
A Good advice from parent to a Child , Master to a Student , Scholar to an Ignorant is like a doctor prescribed pill it is bitter to take but when they take it will do all good for them --- Bhushan

Follow srirama or read 74 articles authored by srirama


No responses found. Be the first to comment...

  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name: