Blog

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