Display update progress on whole page as modal popup

If you have a page where you want to disable all the control while some server side processing is going on, you might want to display the update progress for an updatepanel as a modal popup. You can do that by adding the below code in your update progress.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel1"DisplayAfter="0">
<ProgressTemplate>
<div style="background-color: Gray; filter: alpha(opacity=60); opacity: 0.60; width: 100%;top: 0px; left: 0px; position: fixed; height: 100%;">
</div>
<div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100);opacity: 1; font-size: small; vertical-align: middle; top: 45%; position: fixed;right: 45%; color: #275721; text-align: center; background-color: White; height: 100px;">
<table style="background-color: White; font-family: Sans-Serif; text-align: center;border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style="text-align: inherit;">
   <img src="../../Images/loading.gif" alt="Loading" />
</td>
<td style="text-align: inherit;">
  <span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">
    Please Wait...</span>
 </td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

Showing update progress over modal popup

If you have an update progress that covers your entire page(If you want one, let me know). And you have a modal popup panel that has controls that causes post back, like a button or a drop down. You might end up in a situation where your update progress appears behind the modal pop up panel. To get out of this situation, you  just need a few changes.

1. Set the style, z-index = 1 for the modal pop up panel.
2. Set the style, z-index = 99999 for the update progress.

You are all done. Go ahead and try it out. 

DefaultButton Property of a Panel in Asp.net

Ever wondered whats the DefaultButton property for a Panel. It was of no use untill I started using the modal popup extender. Well the basic use of this property is to assign the Ok button for a panel. So when you hit the enter key while you are working inside this panel, it fires button click event for the button specified in the default button property.

If you are working on a screen with multiple modal popups and multiple buttons,you might the face the issue of opening multiple modal popups on the hitting the Enter key. To avoid this, just set the default panel property of each of your modal popup panels and you will be just fine.