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>
This will display a modal popup simply...