title: How to lock screen on Jquery Onclick and ajax call
body: <p>I have a submit button with id "go" by which i am retrieving data from server side but due to data length is large it is taking large long time to load .For this reason i want to add screen locker on go button click but i dont have any idea how to do it through jquery on client side..</p>
  
  <p>Please direct me to a link where i can get jquery screen locker ...</p>
  
  <p>Here is my code...</p>
  
  <pre><code> $(document).ready(function () {
              $("#go").click(function (e) {
                  e.preventDefault();
                  $("#gridId").GridUnload();
                  gridload();
  
              });
          });
  
  
          function gridload() {
              $.ajax({
                  url: 'Default2.aspx/MyMethod?fromdate=' + $("#fromdate").val() + '&amp;todate=' + $("#todate").val(),
                  dataType: 'json',
                  contentType: "application/json; charset=utf-8",
                  type: 'POST',
                  success: function (ReportDataNew, textStatus, XMLHttpRequest) {
                      //debugger;
                      gridData = JSON.parse(ReportDataNew.d);
                      //console.log(gridData);
                      //alert(gridData.length);
  
  
                      $("#gridId").jqGrid({
                          data: gridData,
                          datatype: "local",
                          height: '100%',
                          autowidth: true,
                          ignoreCase: true,
                          rowNum: 50,
                          rowList: [50, 100, 200],
                          colNames: ['UserName', 'Ordinal', 'Extension', 'Trunk', 'DialDate', 'DialTime', 'Duration', 'Destination', 'Price'],
                          colModel: [
                              { name: 'username', index: 'username', width: 100, editable: true, sortable: true, align: 'center' },
                              { name: 'ordinal', index: 'ordinal', width: 100, editable: true, sortable: true, align: 'center' },
                              { name: 'extension', index: 'extension', editable: true, width: 100, sortable: true, align: 'center' },
                              { name: 'trunk', index: 'trunk', width: 100, editable: true, sortable: true, align: 'center' },
                              { name: 'dialdate', index: 'dialdate', editable: true, width: 100, sortable: true, align: 'center' },
                              { name: 'dialtime', index: 'dialtime', editable: true, width: 100, sortable: true, align: 'center' },
                              { name: 'duration', index: 'duration', editable: true, width: 100, sortable: true, align: 'center' },
                              { name: 'destination', index: 'destination', editable: true, width: 100, sortable: true, align: 'center' },
                              { name: 'price', index: 'price', width: 100, editable: true, sortable: true, align: 'center' }
  
                          ],
                          pager: '#gridpager',
                          viewrecords: true,
                          toppager: true,
                          loadtext: 'Loading...'
  
                      });
  </code></pre>
  
  <p>Any help will be appreciated..
  Thanks In advance..</p>