Create Modal Popup in Ajax UpdateProgress

I searched the web for a simple trick to create a modal popup during asynchronous update in ASP.NET page but it resulted in very complex programming methods using ASP.NET modalextender, etc. So I decided to do it myself. It's a very simple CSS trick.

Modal Div Code

<div style="background-color:Gray;    filter:alpha(opacity=80);    opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;">
 
        </div>

Div displaying Image

<div style="margin:auto;     font-family:Trebuchet MS;filter:alpha(opacity=100);    opacity:1;     font-size:small;     vertical-align: middle; top: auto; position: absolute; right: auto; color: #FFFFFF;">
                <table>
                <tr>
                <td><img src="images/big-roller.gif" alt="Loading"  /></td>
                <td><span style="font-family: Georgia; font-size: medium; font-weight: bold; color: #FFFFFF">Loading..</span></td>
                </tr>
 
                </table>
 
        </div>

Page Design

<asp:UpdateProgress ID="UpdateProgress1" runat="server"
        AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10">
    <ProgressTemplate>
        <div style="background-color:Gray;    filter:alpha(opacity=80);    opacity:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;">
 
        </div>
          <div style="margin:auto;     font-family:Trebuchet MS;filter:alpha(opacity=100);    opacity:1;     font-size:small;     vertical-align: middle; top: auto; position: absolute; right: auto; color: #FFFFFF;">
                <table>
                <tr>
                <td><img src="images/big-roller.gif" alt="Loading"  /></td>
                <td><span style="font-family: Georgia; font-size: medium; font-weight: bold; color: #FFFFFF">Loading..</span></td>
                </tr>
 
                </table>
 
        </div>
 
    </ProgressTemplate>
    </asp:UpdateProgress>