我正在使用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">×</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'>×</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文件的响应出现之前,用户应该无法做任何事情。
我尝试了很多技巧,但我只能禁用表单上出现的两个按钮,直到响应到来。但实际上我想做的远不止这些。
以下是您可以执行的操作:
- 使用 css 创建旋转图标
- 至于图标和消息的位置,请执行以下操作:
- 创建覆盖整个页面的div
- 将 z 指数设置为较高的值,高于模态的数值
- 使用 CSS 将内容集中在div 中
- div 最初应隐藏
- 当提交事件触发时,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'>×</button>"+responseObject.error_message+"</div>";
$(htmlString).insertBefore('div.modal-body #request_form');
} else {
$('#newModal').modal('hide');
$('#Modal2').modal('show');
}
}
});
});
});
演示:
演示
http://jsfiddle.net/cnvusn04/2/
.CSS:
.modal {
text-align: center;
}
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 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);
}
请注意,我希望您的问题应该很接近,因为它"太宽泛了"。
您可以尝试禁用模态上的鼠标事件:
$(".modal").css('pointer-events','none');
另请参阅:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
以上不会禁用按钮(用于打开模态),但您可以保留第一个解决方案。另请注意,您必须将模态的键盘选项设置为false
使用转义键关闭事件。
或者,您可以用代码设置具有比模式更高的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;
}
HTML 紧跟在 <body>
标记之后:
<div id="disableall"></div>
JavaScript:
beforeSend: function() {
$("disableall").show();
},
它对我有用,尝试这样
.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();
},
});
使用诸如动画的字体真棒图标之类的东西有什么问题吗
<i class="fa fa-spin fa-3x"></i>
以上可能会为您解决问题