0

我需要对网站中的每个页面应用页面屏蔽。每个页面都将被屏蔽，直到 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。但是没有敷面膜。有人可以帮忙吗？

4

1 回答 1

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>

在 Post Back 上立即打开页面掩码

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

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; 
}
于 2012-08-29T07:57:53.823 回答