当AJAX响应来自PHP文件时，如何显示以消息为中心的加载器图像&防止引导模式对话框关闭?

I'm using Bootstrap v 3.0.0. I've following HTML code of Bootstrap Modal:

我用的是Bootstrap v 3。0。我遵循引导模式的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>

For above bootstrap modal I've written following AJAX-jQuery code :

对于上面的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();
});

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.

我想在屏幕的中心显示一些适当的加载程序映像以及“您的请求正在处理……”当AJAX请求转到PHP文件时，请等待，它应该显示在屏幕的中心，直到来自PHP文件的响应到来。

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.

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

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.

我尝试了很多技巧，但我只能禁用表单上出现的两个按钮，直到响应到来。但实际上我想做的远不止这些。

5 个解决方案

#1

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

CSS:

CSS:

.modal { text-align: center; }

.modal { text-align:中心;}

.modal:before { display: inline-block; vertical-align: middle; content: " "; height: 100%; }

.modal:{之前显示:inline-block;vertical-align:中间;内容:“”;高度:100%;}

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

.modal-dialog {显示:inline-block;text-align:左;vertical-align:中间;}

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);    

}

5 个解决方案

#1

更多相关文章

随机推荐