how to show the div on click of button while the processing in side the button click is going on.

how to show the div on click of button while the processing in side the button click is going on.

i want to block the web page so that if i click save button, then while the save button is processing one should not be able to click on any other button and after the process of the click of save button is over then form should be available.
 
Q1) how many ways this could be achieved.
q2) following is the way i am using but it is not showing the div unless the processing of the loop finishes.


  3.  <style>

  5.         #popupblock {
  6.             width: 100%;
  7.             height: 100%;
  8.             position: fixed;
  9.             z-index: 9999;
  10.             top: 0;
  11.              background:url("~/Content/loader.gif") no-repeat center center rgba(0,0,0,0.25)
  12.         }

  14.     </style>

  16.       <div  id="popupblock" style="display:none;">
  17.         
  18.     </div>
  19.     <input id="Button1" type="button" value="button" 

  21. <script type="text/javascript">
  22.         $(document).ready(function () {
  23.           
  24.             $("#Button1").click(function () {
  25.                
  26.                 $('#popupblock').show();



  30.                 let ii = 0;
  31.                 let text = "";
  32.                 while (ii < 19000000) {
  33.                     text += "the number is " + ii;
  34.                     var t = text;
  35.                     ii++;
  36.                 }

  38.                 $('#popupblock').hide();
  39.             });
  40.  
  41.         });
  42.     </script>