javascript – 如何在中心显示带有消息的加载器映像并阻止关闭引导模式对话框,而AJAX响应来自PHP文件？

我正在使用Bootstrap v 3.0.0.我遵循Bootstrap Modal的HTML代码：

<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Submit Form</h4>
          </div>
          <div class="modal-body" style="max-height: 300px; overflow-y: auto;">
            <br/>
            <!-- The form is placed inside the body of modal -->
            <form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control" name="reg_id" id="reg_id"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">
                  <input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
                <div class="col-sm-5">                   
                  <input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />                  
                </div>
              </div>  
              <div class="form-group">
                <div class="col-sm-5 col-sm-offset-5">
                  <button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
                  <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

对于上面的bootstrap模式我写了以下AJAX-jQuery代码：

$('#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 = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responSEObject.error_message+"</div>";    
        $(htmlString).insertBefore('div.modal-body #request_form');        
      } else {
        $('#newModal').modal('hide');
        $('#Modal2').modal('show');       
      }
    }
  });
  e.preventDefault();
});

我想在屏幕中央准确地显示一些适当的加载器图像以及当您的AJAX请求转到PHP文件时它的消息“您的请求正在处理…请等待”,它应该正好显示在该文件的中心屏幕直到PHP文件的响应来了.

此外,在此期间,用户不应该关闭模态,如果用户点击模态之外的任何地方,也不应隐藏模态.换句话说,在PHP文件的响应到来之前,用户不应该做任何事情.

我尝试了许多技巧,但我只能禁用表格上出现的两个按钮,直到响应出现.但实际上我想做的远不止这些.

解决方法:

http://jsfiddle.net/cnvusn04/2/

CSS：

.modal {
  text-align：center;
}

.modal：在{之前
  display：inline-block;
  vertical-align：middle;
  内容：“”;
  身高：100％;
}

.modal-dialog {
  display：inline-block;
  text-align：left;
  vertical-align：middle;
}

JQ：

$('#myModal').modal({
    show:false,
})

// prevents closure while the ajax call is in progress
$('#myModal').on('hide.bs.modal', function (e) {   
    if(inProgess == true)
           return false;
})

var inProgess = false;
ajaxCall();

function ajaxCall()
{
    inProgess = true;
    $('#myModal').modal('show');

    //simulates the ajax call
    setTimeout(function(){  
        inProgess = false;
        $('#myModal').modal('hide');
    }, 5000);    

}