Gray out the webpage during Update progress Runs in ASP.NET

Question

i have a webpage where i had put an update progress control.I want that as the update progress starts, the entire Page will be gray out and as it completes the page will resume to original. Below is the code i had added for Update Progress:-

<div class="divTextAlign">
            <asp:Updateprogress id="updProgress" runat="server" dynamiclayout="true" associatedupdatepanelid="updForgotPassword">
                <Progresstemplate>
                    <img src="App_Themes/Images/ajax-loader.gif" alt="" />
                </Progresstemplate>
        </asp:Updateprogress> 

Please Let me know that how i gray out the page , If possible please provide the code also . Thanks in advance.

Answer 1

A bit of css can do this for you -

aspx page

<Progresstemplate>
    <div class="overlay"> 
        <img src="App_Themes/Images/ajax-loader.gif" alt="" />
    </div>
</Progresstemplate>

css

.overlay 
{
 position: absolute;
 background-color: white;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 opacity: 0.8;
 -moz-opacity: 0.8;
 filter: alpha(opacity=80);
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 z-index: 10000;
}

You will need to set the position to relative to the container, and also give it a height, or set the heighjt of the overflow accordingly. You can then also style the image to be centred etc.

Answer 2

You can use one simple div and then use ajaxStart and ajaxStop events like below

<div id="cover"></div>

$('#cover').hide().ajaxStart(function () {$(this).fadeIn(100);}).ajaxStop(function() {  $(this).fadeOut(100);});