title: loading screen on jquery ajax call is not coming
body: <p>I want to show a show a loading screen when a ajax call is made and hide loading screen when ajax call gets complete. I have written the code for it but it works only in mozilla. I want it to work in all browsers.
  My HTML code is like-</p>
  
  <pre><code>&lt;div id="loadScreen" style="display: none;width: 100%; height: 100%; top: 0pt;left: 0pt;"&gt;
     &lt;div id="loadScr" style="filter: alpha(opacity = 65);  z-index: 9999;border: medium none; margin: 0pt; padding: 0pt; width: 100%; height: 100%; top: 0pt;left: 0pt; background-color: rgb(0, 0, 0); opacity: 0.2; cursor: wait; position: fixed;"&gt;&lt;/div&gt;
     &lt;div id="loader"  style="z-index: 10000; position: fixed; padding: 0px; margin: 0px;width: 30%; top: 40%; left: 35%; text-align: center;cursor: wait; "&gt;
       &lt;img src="IMG/ajax-loader.gif" alt="loading" /&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jquery coding is-</p>
  
  <pre><code>$.ajax({
     cache: false,
     beforeSend: function () {
       $('#loadScreen').show();
     },
     type: "POST",
     async: false,
     url: serviceUrl,
     data: jsonData,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     complete:function(){
       $('#loadScreen').hide();
     },
     success: function (result) {
       ProcessAjaxResponse(result);
     },
     error: function (errorMsg) {
       //TODO:Lets see
     }
  });
  </code></pre>