title: Show spinner and disable page while waiting for ajax request
body: <p>I have a project in which I use MVC C#, with Bootstrap and FontAwesome.</p>
  
  <p>My objective is to show a spinner and disable the page while waiting for an ajax request. </p>
  
  <p>So far, I have successfully acomplished this goal with the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;"&gt;
      &lt;img src="~/Images/ajax-loader.gif"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function blablabla() {
              //show spinner, disable page
              var modal = $('&lt;div&gt;').dialog({ modal: true });
              modal.dialog('widget').hide();
              $('#ajax_loader').show();
  
              $.ajax({
                  type: "Get",
                  url: url,
                  success: function (result) {
                     alert("success! " + result);
                  },
                  error: function(result) {
                      alert("error!" + result);
                  },
                  complete: function () {
                      //back to normal!
                      $('#ajax_loader').hide();
                      modal.dialog('close');
                  }
              });
          }
  </code></pre>
  
  <p>Now, <strong>this code works</strong>, I have the page disabled and I show a spinner. 
  <strong>However</strong>, this spinner is also grayed out, and I do not want that to happen. </p>
  
  <p>How can I prevent this bug ?</p>