Question

我有一个网页，其中我已经放置了更新进度控件。我希望随着更新进度的开始，整个页面将变灰并且完成后页面将恢复为原始页面。以下是我为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>

请告诉我如何使页面灰显，如果可能请提供代码。提前谢谢。

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

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

Answer 2

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

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

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

在更新过程中灰显网页在ASP.NET中运行

2 个答案: