Step 1 – Add JQuery

<script type="text/javascript" src="http://www.schimsky.com/jquery/jquery-3.4.1.min.js"></script>

 

 

Step 2 – Add this style to the page header..

 

<style type="text/css">

    .PleaseWaitModal

    {

        position: fixed;

        top: 0;

        left: 0;

        background-color: black;

        z-index: 99;

        opacity: 0.5;

        filter: alpha(opacity=80);

        -moz-opacity: 0.8;

        min-height: 100%;

        width: 100%;

    }

    .PleaseWaitLoading

    {

        font-family: Arial;

        font-size: 10pt;

        border: 5px solid #67CFF5;

        width: 200px;

        height: 100px;

        display: none;

        position: fixed;

        background-color: White;

        z-index: 999;

    }

</style>

 

 

Step 3 – Add This Div to the top, (just above), of the Form..

<!-- Start  Please Wait Message Dive ----------->

 <div class="PleaseWaitLoading" align="center">

    Loading. Please wait...<br />

    <br />

    <img src="Preloader3.gif" alt="" />

</div>

<!-- End  Please Wait Message Dive ----------->

 

 

Step 4 – Add This JavaScript, (Notice the #btnSubmit is the button you want to wire to the “Please Wait”)

<script type="text/javascript">

 

    // ********************************************************************************

    //Please Wait Funciton...

    function ShowPleaseWait() {

 

        PleaseWaitDivHeightOffSet = 50;

        PleaseWaitDivWidthOffSet = 100;

 

        setTimeout(function () {

            var modal = $('<div />');

            modal.addClass("PleaseWaitModal");

            $('body').append(modal);

            var loading = $(".PleaseWaitLoading");

            loading.show();

             var top = (window.innerHeight / 2) - PleaseWaitDivHeightOffSet;

             var left = ((window.innerWidth / 2)) - PleaseWaitDivWidthOffSet;

            loading.css({ top: top, left: left });

        }, 200);

    }

    // ********************************************************************************

 

 

  // ********************************************************************************

  //** Button you want to show

    $('#btnSubmit').click(function() { ShowPleaseWait(); });

    $('#DropDownList1').change(function() { ShowPleaseWait(); });

  // ********************************************************************************

   

 

//11.23.2021 We need to trap the escape key and render it useless so

    //it doesn't mess with the ShowPleaseWait dialog.. if i don't

    //do this, the ShowPleaseWait dialog will never disapear from screen

    $(document).keydown(function (e) {

        if (e.keyCode == 27) return false;

    });

    // *************************************************************************

</script>