ASP.NET + JS (Show loading model popup on button click with JS)

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<script type="text/javascript">

     

        //This will call the model popup

        function showloadingImage() {

            //The below first line is for IE-8 Users

            $('#<%= popupProcessingPanel.ClientID %>').append('<img src="../../Images/yourloadingimage.gif" alt="" style="position:absolute; top:40%; left:45%;" />');

           

            //The below line will call the model popup

            $('#<%= targetButton.ClientID %>').click();

        }

    </script>

   <!-- HTML for modal popup -->

        <asp:ScriptManager ID="ScriptManager1" runat="server" />

         <asp:Panel ID="popupProcessingPanel" runat="server" Style="display: none; width:100%; height :100%; background-color:white; opacity:0.9;">

            <img src="Images/yourloadingimage.gif" alt="" style="position:absolute; top:40%; left:45%;" />

        </asp:Panel>       

        <asp:Button ID="targetButton" runat="server" Text="targetButton" Style="display: none;" CausesValidation="false" />

        <asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"

            PopupControlID="popupProcessingPanel" Enabled="True" TargetControlID="targetButton">

        </asp:ModalPopupExtender>

        <!-- END HTML for modal popup -->

//Three ways to call model popup
First:

Second:

Third: