Gray out the webpage during Update progress Runs i

问题:

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.

回答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.

回答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);});