Friday, May 1, 2009

Modal Progress Display for ASP.NET

If you use the AJAX Extensions in your ASP.NET web site then you've probably used the UpdateProgess control to display that some action is processing in the background.

Here is a code snippet of a simple Modal type processing box I use for some static notifications of some action.

HTML:

<asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="False" DisplayAfter="1">
<ProgressTemplate>
<div class="PageWorkingBackground">
</div>
<div class="UpdateProgress">
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/SEIB-Validating.gif" AlternateText="[image]" />
<asp:Image ID="ajaxLoadNotificationImage" runat="server" ImageUrl="~/images/bar_loader.gif"
AlternateText="[image]" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>


CSS:
.PageWorkingBackground
{
position: fixed;
top: 0;
left: 0;
background-color:Gray;
filter:alpha(opacity=75);
opacity:0.75;
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%

}

.UpdateProgress
{
background-color:#fff;
width: 150px;
text-align: center;
vertical-align: middle;
position: fixed;
bottom: 50%;
left: 45%;
border: solid 2px #453825;
margin: 10px;
padding: 10px;
}

Here is a picture of the modal box in action:

No comments:

Post a Comment

Swidget