A simple method to implement modal popup during ASP.

NET asynchronous request usi

ng ASP updatepanel and updateprogress
I searched the web for a simple trick to create a modal popup during asynchronou
s update in ASP.NET page but it resulted in very complex programming methods usi
ng ASP.NET modalextender, etc. So I decided to do it myself. It's a very simple
CSS trick.
Modal Div Code
Hide Copy 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
Hide Copy Code
<div style="margin:auto;
font-family:Trebuchet MS;filter:alpha(opacity=100);
opacity:1;
font-size:small;
vertical-align: middle; top: auto; posit
ion: 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-w
eight: bold; color: #FFFFFF">Loading..</span></td>
</tr>
</table>
</div>
Page Design
Hide Copy Code
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="10">
<ProgressTemplate>
<div style="background-color:Gray;
filter:alpha(opacity=80);
opaci
ty:0.80; width: 100%; top: 0px; left: 0px; position: fixed; height: 800px;">
</div>
<div style="margin:auto;
font-family:Trebuchet MS;filter:alpha(opa
city=100);
opacity:1;
font-size:small;
vertical-align: middle; top: a
uto; 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-w
eight: bold; color: #FFFFFF">Loading..</span></td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
This will display a modal popup simply...