If you are interested in this topic, you should check out the new post: "Modal UpdateProgress for UpdatePanel – Revisited" on this topic. The solution in this post had some issues that have been corrected in the new post.
I’ve seen a lot of requests on the ASP.NET forums for ways to display disable an UpdatePanel during an update. I’ve seen quite a few complex techniques to achieve this, but by using standard controls you can create a nice looking modal progress indicator. Using the UpdateProgress control, there is an easy way to make the progress indicator modal with little code and a bit of CSS.
First, let’s start with the code:
<asp:updateprogress associatedupdatepanelid="UPDATEPANELID" id="updateProgress" runat="server">
<progresstemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage"> Loading…<br /><br /><img alt="Loading" src="images/ajax-loader.gif" /></div>
</progresstemplate>
</asp:updateprogress>
Pretty simple code… basically the only “custom code” are the two DIVs. The first, progressBackgroundFilter is used to blank out the page. The second is the message to display. In this case, it’s just text and an animated gif.
The rest of the code is just CSS. In this example, I am using the id selector approach of CSS to add the styles to the DIVs but you can of course changed these to class names.
#progressB
ackgroundFilter {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
overflow:hidden;
padding:0;
margin:0;
background-color:#000;
filter:alpha(opacity=50);
opacity:0.5;
z-index:1000;
}
#processMessage {
position:absolute;
top:30%;
left:43%;
padding:10px;
width:14%;
z-index:1001;
background-color:#fff;
}
The progressBackgroundFilter is what blanks out the screen. This operates like standard modal code by simply overlaying a DIV on top of the content using absolute positioning. The z-index is what sets it to be over the content; this number can be anything, but I set it to 1000 so it would be much higher than any other absolutely positioned object. The filter is used to set the transparency in IE while the opacity is for FireFox; both set the transparency to half. Finally, the processMessage styles position a div above the background filter (z-index is set to 1001). The top, left and width are set to percentages to horizontally center the box and the top is arbitrarily placed 30% from the top.
The best condition for making modal items work easily is using a separate container DIV and hiding the browser’s scrollbar. One of my favorite layouts is Stu Nicholls’ approach to a fixed layout: http://www.cssplay.co.uk/layouts/fixit.html (also see the rest of his website for some real awesome CSS fun). With this approach, the overlay can block out the scrollbars as well.
have scrollbars appear.
10 Comments
I set up the Modal UpdateProgress element as above to be displayed while a file is being uploaded but it is never shown. Due to using the INPUT type=file tag to upload the file I was forced to create a PostBackTrigger for the update panel attached to the upload button. Is there something I have missed that is causing the popup to not be displayed?
Mayank -You must be using IE6. I haven’t taken the time to really mess around with IE6. The technique works in IE7 and FireFox. For IE6, the problem is that the progressBackgroundFilter isn’t stretched over the screen. IE6 doesn’t stretch it since it doesn’t like “right” and “bottom” CSS attributes. You can check out http://www.alistapart.com/articles/conflictingabsolutepositions, which may help you with an IE6 solution.If you come up with a solution, please let us know about it!-Damien
Hi,Even the sample that you have given under http://www.visoftinc.com/samples/UpdateProgress.aspx is not “opaque”. I can still hit all the controls on your page and case them to tirgger.I am looking for someting which will cover the entire page, blocking the entire page, stopping the user from doing anything on the page, during the postback.~Mayank
This post is very very helpful for me.
http://www.visoftinc.com/samples/UpdateProgress.aspx Works in ie7 but not ie6this blanks background out in ie7 but I only see the message box in ie6
I have added a sample of this on the Visoft website under the Samples section. The direct link is: http://www.visoftinc.com/samples/UpdateProgress.aspx
Emilio:I looked into your issue and discovered my styles were off. I have corrected the styles in the post; please let me know if this helps…
I have seen those sites where the whole page gets whited out as if with a blanket. I supposed that was the effect I was supposed to see. But in mine it is more like a transparent blanket because the progress divs get repositioned to the middle of the action but it is not made opaque and like I said I can still modify the contents of the controls that are supposed to be “under”.My divs in the progress panel are exactly as you have them, no single element (<div />), properly nested. It is like this:<asp:UpdateProgress ID=”UpdateProgressMail” runat=”server” AssociatedUpdatePanelID=”UpdatePanelMail” DisplayAfter=”200″> <ProgressTemplate> <div id=”progressBackgroundFilter”></div> <div id=”processMessage”> Sending mail and may take a few minutes. Do not press Send again.<br /> <asp:Image ID=”ImageProgressBar” runat=”server” EnableViewState=”False” ImageAlign=”AbsMiddle” ImageUrl=”~/img/progressbar_green.gif” /> </div> </ProgressTemplate> </asp:UpdateProgress>I eliminated the filter and opacity like you said but the effect is the same :(
Emilio:That’s interesting… I haven’t seen this problem. Try getting rid of CSS styles (e.g. opacity and filter) to see if anything improves. I’ve seen oddities in IE with issues of having nested DIVs and not setting the opacity to 100% of the inner DIVs if it’s not specified. Are your DIV tags closed like shown above? Using <div .. /> also can cause issues…
tried that on my page. I have a user control which is a mail form with send/cancel buttons. This is within an AJAX update panel. The Update Progress is associated with that panel. All of this is on a page (ASPX) that in turn has a Master Page.When i click on Send I see the progress DIV being overlayed on top of the control (Before it was at the bottom). But… there is no opacity, no transparency on either FireFox 2.0 nor IE 7.0 and while it is in progress I am still able to access the underlying controls and modify them.So, it does not work for me.