基于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在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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静态变量当缓存的方法
2013/11/13 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHP分享图片的生成方法
2018/04/25 PHP
php新建文件的方法实例
2019/09/26 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
解读Python中degrees()方法的使用
2015/05/18 Python
python基于phantomjs实现导入图片
2016/05/13 Python
Python编程求质数实例代码
2018/01/31 Python
python简易远程控制单线程版
2018/06/20 Python
Python 面向对象部分知识点小结
2020/03/09 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
Android面试题及答案
2015/09/04 面试题
《老山界》教学反思
2014/04/08 职场文书
致共产党员倡议书
2014/04/16 职场文书
学生评语集锦
2015/01/04 职场文书
校园开放日新闻稿
2015/07/17 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript