当AJAX响应来自PHP文件时，如何在中心显示带有消息的加载程序图像并防止引导模式对话框关闭？

Question

我正在使用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>

对于上述引导程序模态，我编写了以下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文件的响应到来，用户才不能做任何事情。

我尝试了许多技巧，但是我只能禁用出现在表单上的两个按钮，直到响应出现。 但实际上我想做的不只是此事。

Answer 1

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

CSS：

.modal {text-align：center; }

.modal：before {display：inline-block; 垂直对齐：中间； 内容：“”； 高度：100％; }

.modal-dialog {display：inline-block; 文字对齐：左； 垂直对齐：中间； }

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

}

Answer 2

您可以执行以下操作：

• 使用CSS创建旋转图标
• 至于图标和消息的位置，请执行以下操作：
  • 创建覆盖整个页面的div
  • 将z-index设置为较高值，高于模态值
  • 使用CSS将内容放在div中
  • div最初应该是隐藏的
  • 当Submit事件触发时，使div可见，然后禁用任何用户操作
• 使用以下JavaScript：

JavaScript：

$(function() {
    var mod1 = $('#newModal'),
        mod2 = $('#modal2'),
        btn = $('.open-form'),
        ldg = $('#loading');

    mod1.add(mod2).modal({show: false});

    btn.on('click', function() {
        mod1.modal( 'show' );
    });

    $('#request_form').submit(function(e) {
        e.preventDefault();
        ldg.find('> div > span').text('Please wait as your file is uploaded')
        .end().show();
        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         : formAction,
            type        : 'POST',    
            cache       : false,
            data        : formdata ? formdata : form.serialize(),
            contentType : false,
            processData : false,
            success: function(response) {
              ldg.hide();
              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');       
              }
            }
          });
    });
});

演示：

演示

Answer 3

请注意，我希望您的问题应该接近，因为它“太宽泛”。

您可以尝试在模式上禁用鼠标事件：

$(".modal").css('pointer-events','none');

另请参阅： https : //developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

上面没有禁用按钮（用于打开模式），但是您可以保留第一个解决方案。 还要注意，您必须将模式的键盘选项false为使用转义键关闭pevent。

或者，您可以通过代码设置覆盖图，该覆盖图的z-index高于模态

CSS：

html, body{
  height:100%;
}

#disableall{
position: absolute;
width: 100%;
height:100%;
z-index:1050;
background-color: rgba(255,0,0,0.5);
display:none;
}

直接在<body>标记之后的html ：

<div id="disableall"></div> 

javascript ：

 beforeSend: function() { 
      $("disableall").show(); 
    },

Answer 4

它为我工作了尝试这样

的CSS

#pageloaddiv {
position: fixed;
margin: 0px;
width: 100%;
height: 100%;
z-index: 100000;
background: url('../img/ajax-loader.gif') no-repeat center center rgba(0, 0, 0, 0.38);
}

html

<div id="pageloaddiv" style="display: none;"></div>

javascript

$.ajax({
    url: 'your url',  
    beforeSend:function(){
        $('#pageloaddiv').show();     
    },
    success: function() {
        $('#pageloaddiv').hide();
        $('#newModal').hide();
    },
});

Answer 5

使用动画等字体超赞图标有什么问题吗

<i class="fa fa-spin fa-3x"></i>

以上可能会为您解决问题