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来完成。 互联网上有很多例子可以做到这一点，这是完整页面覆盖的一个示例代码

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

立即在“回发”上打开页面遮罩

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

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