ASP.NET - UpdateProgress with ModalPopupExtender

Watch this example on Youtube: 
    


Add Update Progress, Modal Popup Extender and Panel with image and label

    whole code looks like:

 
    <div class="ControlsCenter">
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:ModalPopupExtender ID="modalExtender" runat="server" TargetControlID="UpdateProgress1"
            PopupControlID="Panel1" DropShadow="true" BackgroundCssClass="modalBackground">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" CssClass="modalExtender">
            <img alt="Processing" src="../Images/working.gif" />
            <br />
            <asp:Label ID="lblProcessing" runat="server" Text="Processing..." CssClass="TitleBar"></asp:Label>
        </asp:Panel>
    </div>

     Modal is executed when Update Progress is called and displays controls from Panel therefore:
     TargetControlID="UpdateProgress1"
     PopupControlID="Panel1"

    class="ControlsCenter" will center all controls
    .ControlsCenter
    {
        margin-left: auto;
        margin-right: auto;
        width: 50em;
        text-align:center;
    }

    BackgroundCssClass="modalBackground" will shadow whole screen
    .modalBackground
    {
        background-color: Gray;
        filter: alpha(opacity=50);
        opacity: 0.50;
    } 

    CssClass="modalExtender" will just centralize all controls inside
   .modalExtender
    {
        border-width: 1px;
        border-style: solid;
        background-color: #FFFFFF;
        position: absolute;
        text-align:center;
    }


    add the following javascript code just after form tag
        </form>

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(showPopup);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(hidePopup);   

        function showPopup(sender, args){
         var ModalControl ='<%= modalExtender.ClientID %>';  
            $find(ModalControl).show();       
        }

        function hidePopup(sender, args) {
            var ModalControl ='<%= modalExtender.ClientID %>';
            $find(ModalControl).hide();
        }
    </script>