asp.net - 在 ASP.NET 中运行更新进度期间使网页变灰

Question

我有一个网页，我在其中放置了更新进度控件。我希望随着更新进度的开始，整个页面将变灰，完成后页面将恢复为原始状态。以下是我为更新进度添加的代码：-

<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> 

请让我知道我是如何使页面变灰的，如果可能的话，请同时提供代码。提前致谢。

Answer 1

一点css可以为你做到这一点 -

页面

<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;
}

您需要将位置设置为相对于容器，并给它一个高度，或者相应地设置溢出的高度。然后，您还可以将图像设置为居中等。

Answer 2

您可以使用一个简单的 div，然后使用 ajaxStart 和 ajaxStop 事件，如下所示

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

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