JQuery 数据加载中禁止操作页面
2024-10-01 04:10:22
比较常见的做法,但对我而言是第一次做,记录一下。
为了把找来的loading.gif 的背景色设置为透明,还特意装了quicktime。
有学到一些额外的东西。
先将div及img定义好
<body>
<div id="loadingDiv">
<img src="loading.gif" style="margin-top:230px;margin-left:700px;" />
</div>
</body>
注意:在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。
css样式(重点)
#loadingDiv {
background-color:grey;
filter: alpha(opacity=50); <!--IE的透明度-->
opacity: 0.1;<!--透明度,数值越大越透明,不要调太小,不然gif图片会特别模糊-->
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; <!--此处的图层要大于页面-->
display:none;
}
注意:此处用的id样式,页面初始化即启用,且已在样式内将该div设置为不显示。
之后将在js内动态调整它的隐藏与显示属性。当它显示时,将会遮盖住整个body,
用户无法对页面进行任何操作。
javascript代码:
function loadData(){
//弹出遮盖层
$("#loadingDiv").fadeTo(200,0.5); $.ajax({
url: 'xx/xx!query.action',
dataType:"json",
type: 'POST',
success: function(data) { //此处是加载列表数据的代码 //数据加载完毕,则关闭遮盖层
$("#loadingDiv").fadeOut(200); }
});
}
注意:这里用了fadeTo和fadeOut来显示和隐藏div,当然也可以用 show 和 hide。
最新文章
- bzoj 3196: Tyvj 1730 二逼平衡树
- mvc+mysql+EF
- 【转】IP分片和TCP分段
- 极简版 react+webpack 脚手架
- Datagridview 添加checkbox列,并判断Datagridview 中的checkbox列是否被选中
- Spring之@Configuration配置解析
- 斐波那契堆(一)之 图文解析 和 C语言的实现
- 求1+2+3+...+n
- maven总结2
- Theano学习笔记:Theano的艰辛安装体验
- (转)关于rdlc报表的数据源
- OpenStack:安装Glance
- 父视图 使用 UIViewAnimationWithBlocks 时,如何让子视图无动画
- 【CSS sprites (CSS图片精灵) 详解】
- 其实,SSL也不是配通了就什么都不管的~~
- C#。4.1数组的应用
- Python中的继承
- 详谈socket请求Web服务器过程(转)
- 从Trie树到双数组Trie树
- 事务及其特性ACID
热门文章
- CentOS6.8 安装python2.7,pip以及yum
- PAT 1099. Build A Binary Search Tree (树的中序,层序遍历)
- 一个电商项目的Web服务化改造6:单元测试4步走,构造数据、执行操作、断言、回滚
- [TJOI2014] [Bzoj3996] 线性代数 [网络流,最小割]
- class类加载机制
- [bzoj2226][Spoj5971]LCMSum_欧拉函数_线性筛
- android自带的处理Bitmap out Memory 的处理,我仅仅是改变了些写法成为自己用的东西
- Cocos2d-X开发中国象棋《三》開始场景的实现
- hibernate实战笔记1---初探
- @ConfigurationProperties注解