HTML: Disable the screen with overlay DIV

Declaring the Overlay DIV:

  • Overlay DIV with waiting cursor (place it wherever in html body):
<div id="waiting-overlay">
<img id="waiting-image" src="/images/waiting.gif">
</div>
  • Overlay DIV with text message:
<div id="waiting-overlay">
<table height=100% width=100%>
<tr>
<td align=center>
<h1>Please wait...</h1>
</td>
</tr>
</table>
</div>

Setting Overlay DIVs style:

<style type="text/css">
#waiting-overlay {
left: 0;
position: absolute;
top: expression(window.scrollTop);
width: 100%;
height: 100%;
z-index: 900;
background-color: #000;
opacity: 0.4;
filter:alpha(opacity=40);
text-align:center;
display:none;
}
</style>

Making it appear:

javascript:document.getElementById('waiting-overlay').style.display='block';

 

Leave a Reply