Ajax: Show a page mask during Async Postback

We can display a page mask (for avoiding unnecessary clicks) during a async postbacks with the help of an modalpopup extender. 1. Add a new modalpopup extender in the page.

<ajaxToolkit:ModalPopupExtender ID="MPE001" BackgroundCssClass="maskbg" 
runat="server" TargetControlID="dummyLink" PopupControlID="divLoader" Drag="false" 
RepositionMode="None" BehaviorID="bMPLoad" />

2. Add a dummy hyperlink in the page as a target control for MPE.

<asp:HyperLink ID="dummyLink" runat="server" CssClass="hidden"
 NavigateUrl=""></asp:HyperLink>

3. Keep the contents for the mask (Loader image, Loading text etc).

<div id="divLoader" style="display: none;">
    <div style="background-color: #264952">
        <div style="text-align: center; color: #0ACAF9;">
            Loading...</div>
        <img src="images/loader.gif" alt="Loading..." />
    </div>
</div>

4. Use the following script to show/hide the mask. You can optionally remove the scrollbar of the page as in some rare case, MPE is causing an indefinite scroll in the page.

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

    function BeginRequestHandler(sender, args) {
        // Show the mask
        document.body.style.overflow = 'hidden';
        $find('bMPLoad').show();
    }

    function EndRequestHandler(sender, args) {
        // Hide the mask
        document.body.style.overflow = 'scroll';
        $find('bMPLoad').hide();
    }

</script>