title: How to show loader image with message at center & prevent bootstrap modal dialog box from closing while AJAX response is coming from PHP file?
body: <p>I'm using <strong>Bootstrap v 3.0.0</strong>. I've following HTML code of Bootstrap Modal:</p>
  
  <pre><code>&lt;div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Submit Form&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body" style="max-height: 300px; overflow-y: auto;"&gt;
              &lt;br/&gt;
              &lt;!-- The form is placed inside the body of modal --&gt;
              &lt;form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action=""&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-sm-4 col-sm-offset-1 control-label"&gt;Reg ID &lt;span style="color:#FF0000"&gt;*&lt;/span&gt; :&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;
                    &lt;input type="text" class="form-control" name="reg_id" id="reg_id"/&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-sm-4 col-sm-offset-1 control-label"&gt;Reg Date&lt;span style="color:#FF0000"&gt;*&lt;/span&gt; :&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;
                    &lt;input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="form-group"&gt;
                  &lt;label class="col-sm-4 col-sm-offset-1 control-label"&gt;Upload Image&lt;span style="color:#FF0000"&gt;*&lt;/span&gt; :&lt;/label&gt;
                  &lt;div class="col-sm-5"&gt;                   
                    &lt;input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" /&gt;                  
                  &lt;/div&gt;
                &lt;/div&gt;  
                &lt;div class="form-group"&gt;
                  &lt;div class="col-sm-5 col-sm-offset-5"&gt;
                    &lt;button type="submit" class="btn btn-success" id="btn_receipt_submit"&gt;Submit&lt;/button&gt;
                    &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>For above bootstrap modal I've written following AJAX-jQuery code :</p>
  
  <pre><code>$('#request_form').submit(function(e) {
    var form = $(this);
    var formdata = false;
    var reg_id = $('#reg_id').val();
    var reg_date = $('#reg_date').val();
  
    if(window.FormData) {
      formdata = new FormData(form[0]);
    }
  
    var formAction = form.attr('action');
  
    $.ajax({
      url         : 'xyz.php',
      type        : 'POST',    
      cache       : false,
      data        : formdata ? formdata : form.serialize(),
      contentType : false,
      processData : false,
      beforeSend: function() { 
        $(".btn").prop('disabled', true); // disable both the buttons on modal      
      },
  
      success: function(response) {
        $(".btn").prop('disabled', false); // enable both the buttons on modal
        var responseObject = $.parseJSON(response);    
        if(responseObject.error_message) {
          if ($(".alert-dismissible")[0]) {
            $('.alert-dismissible').remove();   
          }  
          var htmlString = "&lt;div class='alert alert-danger alert-dismissible' role='alert'&gt;&lt;button type='button' class='close' data-dismiss='alert' aria-hidden='true'&gt;&amp;times;&lt;/button&gt;"+responseObject.error_message+"&lt;/div&gt;";    
          $(htmlString).insertBefore('div.modal-body #request_form');        
        } else {
          $('#newModal').modal('hide');
          $('#Modal2').modal('show');       
        }
      }
    });
    e.preventDefault();
  });
  </code></pre>
  
  <p>I want to show some appropriate loader image exactly at the the center of the screen along with the message "Your request is processing...please wait" when the AJAX request goes to PHP file and it should be displayed exactly at the center of the screen until the response from PHP file comes.</p>
  
  <p>Also during this time user should not be able to close the modal, nor it should get hidden if user clicks anywhere apart from the modal. In other words, until the response from PHP file comes user should not be able to do anything. </p>
  
  <p>I tried many tricks but I'm only able to disable the two buttons appearing on form until the response comes. But actually I want to do much more than this.</p>