Just a simple JavaScript example how to display a overlying div on the whole page which is blocking all underlying links and forms and also handles problems with selectboxes in IE Browsers. Sometimes it is neccesary if you wan´t to prevent the user clicking around on the site example during an html loading process.
Sometimes it can be more usefull to only put it on a part of the site so the user can still access main site navigation.
<div id=
"overlyingdiv" style=
"visibility: hidden; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; filter:alpha(opacity=50); -moz-opacity: 0.50; background-color: #999999; text-align: center;">
<iframe width=
"100%" height=
"100%" style=
"background-color:transparent;">
</iframe>
<div style=
"position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; filter:alpha(opacity=50); -moz-opacity: 0.50; background-color: #999999; text-align: center;">
<div style=
"display:block; margin:0 auto; position:absolute; top: 50%; left:50%;"><img src=
"loader.giff" alt=
"" /><br /> Loading Data...</div>
</div>
</div>
'
Java Script Example using prototype
function l(){
$('overlyingdiv').style.visibility='visible';
}
function loadingBlockerDisable(){
$('overlyingdiv').style.visibility='hidden';
}