Page_Load之前的页面掩码

Question

我需要将网页屏蔽应用到网站的每个页面。在page_load完成之前，每个页面都将被屏蔽。

我试着把它放在母版页中：

<asp:UpdateProgress ID="updateProgress" runat="server"  DynamicLayout="false"  >
    <ProgressTemplate>
        <div id="Progress">Loading...</div>
        <div id="bgDiv"></div>
    </ProgressTemplate>
</asp:UpdateProgress>

但它不起作用。为了测试它我在master的page_load上延迟了。但是没有应用面具。有人可以帮忙吗？

Answer 1

首先，这可以使用javascript和css完成，而不是使用后面的代码。所以这是一个如何做到的例子：

页面掩码

冷却将该技巧引入页面的代码。让我们假设您选择一种方式使页面看起来不可点击，淡出。

这可以用div和css完成。互联网上有很多例子，这里有一个 full page overlay

的示例代码

<style>
#displaybox {
    z-index: 10000;
    filter: alpha(opacity=50); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
    -moz-opacity: .50; /*older Mozilla*/
    -khtml-opacity: 0.5;   /*older Safari*/
    opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
    background-color:#000000;
    position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>

同步页面加载/或回发

你在html页面部分的正文后面设置了淡出div，然后创建一个flush（）使它立即出现，如：

<div id="FadeOutBox" ></div><%Response.Flush(); %>

并在页面底部使用javascript删除它，或者使用css样式，如下所示：

<script>document.getElementById('FadeOutBox').style.display = "none";</script>

异步/ UpdatePanel调用

如果您有更新面板，则需要捕获更新面板触发的事件，并且每次都可以显示此div，如下所示：

<script>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function BeginRequestHandler(sender, args) {
        // Show the mask
        document.getElementById('FadeOutBox').style.display = "block";
    }

    function EndRequestHandler(sender, args) {
        // Hide it
        document.getElementById('FadeOutBox').style.display = "none";
    }

</script>

立即在Post Post上打开Page Mask

您甚至可以在页面加载之前，在页面加载之前和页面加载之后打开页面掩码。您可以使用此代码来捕获提交：

if (Page.EnableEventValidation)
{
    if (string.IsNullOrEmpty(Page.Form.Attributes["onsubmit"]))
    {
        Page.Form.Attributes["onsubmit"] = "return ShowWait();";
    }
}

和javascript部分：

function ShowWait()
{
   document.getElementById('FadeOutBox').style.display = "block";
   return true; 
}