实现的效果:点击按钮之后触发遮掩窗体+loading动画,同时触发ajax请求,当请求成功时触发遮掩窗体+loading动画消失。ajax请求期间用户不能再对页面进行操作,点击空白处不会退出。 导入文件:jquery+bootstrap+spin.min.js
如下图:
html比较简单,主要是一个包含整个页面的div、一个触发按钮以及一个隐藏的遮掩窗体。 html:
<div id="wrapper" style="position:absolute; left:0; top:0px;height:100%;width:100%">
<div><button id="submitBtn" type="button">点击触发遮掩窗体</button></div>
<div class="col-md-12 column">
<div class="modal fade" id="modal-container" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" keyboard="false">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
</div>
</div>
js:
$(document).ready(function(){
//初始化spinner
var opts = {
lines: 13, // 花瓣数目
length: 20, // 花瓣长度
width: 10, // 花瓣宽度
radius: 30, // 花瓣距中心半径
corners: 1, // 花瓣圆滑度 (0-1)
rotate: 0, // 花瓣旋转角度
direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
color: '#5882FA', // 花瓣颜色
speed: 1, // 花瓣旋转速度
trail: 60, // 花瓣旋转时的拖影(百分比)
shadow: false, // 花瓣是否显示阴影
hwaccel: false, //spinner 是否启用硬件加速及高速旋转
className: 'spinner', // spinner css 样式名称
zIndex: 2e9, // spinner的z轴 (默认是2000000000)
top: 'auto', // spinner 相对父容器Top定位 单位 px
left: 'auto'// spinner 相对父容器Left定位 单位 px
};
var spinner = new Spinner(opts);
//点击按钮触发
$("#submitBtn").click(function(){
var target=$("#wrapper").get(0);
spinner.spin(target);
$('#modal-container').modal({backdrop: 'static', keyboard: false});
$.post("http://localhost:8080/ace_admin_template/purchase.do",function(){
spinner.spin();
$('#modal-container').modal('hide');
});
});
});
关于加载中loading动画: 目前使用的是插件spin,用法如上。有兴趣的还可以尝试一下gif图片,在线生成loading的gif 地址:在线生成loading图片 毕竟图片 没有浏览器兼容的问题。