0

Webサイトのすべてのページにページマスキングを適用する必要があります。page_loadが完了するまで、すべてのページがマスクされます。

私はこれをマスターページに入れようとしました：

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

しかし、それは機能しません。それをテストするために、マスターの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>

ポストバックですぐにページマスクを開きます

ポストバックでページをロードする前にページマスクを開いて、ページをロードした後に開くこともできます。このコードビハインドを使用して送信をキャプチャします。

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 に答える