基于jquery的loading 加载提示效果实现代码


Posted in Javascript onSeptember 01, 2011

loading 加载提示 ······ 透明遮罩 居中

基于jquery的loading 加载提示效果实现代码   基于jquery的loading 加载提示效果实现代码

body{ 
margin: 0; 
font-size: 12px; 
line-height: 100%; 
font-family: Arial, sans-serif; 
} 
.background { 
display: block; 
width: 100%; 
height: 100%; 
opacity: 0.4; 
filter: alpha(opacity=40); 
background:while; 
position: absolute; 
top: 0; 
left: 0; 
z-index: 2000; 
} 
.progressBar { 
border: solid 2px #86A5AD; 
background: white url(progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
display: block; 
width: 148px; 
height: 28px; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-left: -74px; 
margin-top: -14px; 
padding: 10px 10px 10px 50px; 
text-align: left; 
line-height: 27px; 
font-weight: bold; 
position: absolute; 
z-index: 2001; 
} 
<div id="background" class="background" style="display: none; "></div> 
<div id="progressBar" class="progressBar" style="display: none; ">数据加载中,请稍等...</div> 
var ajaxbg = $("#background,#progressBar"); 
ajaxbg.hide(); 
$(document).ajaxStart(function () { 
ajaxbg.show(); 
}).ajaxStop(function () { 
ajaxbg.hide(); 
});

作者:曾祥展
Javascript 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
Javascript缓存API
Jun 14 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
jQuery1.6 类型判断实现代码
Sep 01 #Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 #Javascript
用javascript作一个通用向导说明
Aug 30 #Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 #Javascript
javascript 原型继承介绍
Aug 30 #Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
You might like
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
老生常谈python中的重载
2018/11/11 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python实现自动清理重复文件
2020/08/24 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
浪漫婚礼主持词
2014/03/14 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2014个人年度工作总结
2014/12/15 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js