在 ASP.NET 中运行更新进度期间使网页变灰答案

【问题标题】：Gray out the webpage during Update progress Runs in ASP.NET在 ASP.NET 中运行更新进度期间使网页变灰
【发布时间】：2012-05-21 08:49:30
【问题描述】：

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

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

请告诉我我是如何将页面变灰的，如果可能，请同时提供代码。提前致谢。

【问题讨论】：

另见stackoverflow.com/a/1003771/159270

标签： asp.net ajax

【解决方案1】：

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

aspx 页面

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：