前端页面给指定的div添加遮罩层,并且带有加载中的小旋转图片
话不多说,先上代码,其实还是比较简单的
$("<div id='shade' style='opacity:0.85;background:white'></div><img src='${ctx}/static/images/loading2.gif'/>").css({
position:'absolute',
top:0,
left:0,
zIndex:300,
height:'100%',
width:'100%'
}).appendTo('#id');
其中#id就是你要遮罩的div的id,其中用到的加载中图片:加载中图片
就是这么简单,这里需要注意的事,要进行遮罩的div的样式要这样设置position:relative(切记,否则达不到你想要的效果!)
忘了说了,这里的js代码是基于JQuery写的,要引入JQuery文件哦!
效果图:

前端页面给指定的div添加遮罩层,并且带有加载中的小旋转图片的更多相关文章
- 基于Bootstrap的遮罩层,带有加载提示
1.body中的html <div class="modal fade" id="loadingModal"> <div style=&quo ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- jQuery加载一个html页面到指定的div里
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- 使用jQuery加载html页面到指定的div
一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...
- 利用div实现遮罩层效果
利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...
- js添加遮罩层
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...
- div+css遮罩层
曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...
- 前端小结(3)---- 添加遮罩层,并弹出div
有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...
- 使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路
------------------------------------------20180410补充------------------------------------------------ ...
随机推荐
- 51nod 1040 欧拉函数
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1040 1040 最大公约数之和 题目来源: rihkddd 基准时间限制 ...
- js对象数组 根据某个共同字段 分组
var arr = [ {"id":"1001","name":"值1","value":" ...
- ES6环境配置
1.电脑有node环境,运行npm init 2.cnpm i -D babel-core babel-preset-es2015 babel-preset-latest 3.创建.babelrc文件 ...
- 【Window Service】关于Window Service的两三事
引言 Window Service通常用于寄宿WCF服务或者定时作业.下面记录一下它的用法. 创建 创建Window Service项目后,可以看到Program和Service1类.Program ...
- 如何使用SOCKET 发送HTTP1.1 GET POST请求包
http://blog.csdn.net/yc0188/article/details/4741871 http://docs.linuxtone.org/ebooks/C&CPP/c/ch3 ...
- 排列(加了点小set就过了,哈哈哈)
Ray又对数字的列产生了兴趣: 现有四张卡片,用这四张卡片能排列出很多不同的4位数,要求按从小到大的顺序输出这些4位数. 输入描述: 1 2 3 4 1 1 2 3 0 1 2 3 0 0 0 0输出 ...
- DOS命令查询当前文件夹中文件数量
太牛X,太实用,因此单独记下 1. 仅统计文件数量 dir /b /a-d | find /v /c "&#@" 2. 统计文件和目录总数量 dir /b | find / ...
- npm init node 通过指令创建一个package.json文件及npm安装package.json
描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license项的 ...
- bzoj 1977 [BeiJing2010组队]次小生成树 Tree
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1977 kruscal别忘了先按边权sort.自己觉得那部分处理得还挺好的.(联想到之前某题的 ...
- 伪差IO分标准
伪差分电平 所谓伪差分电平,就是信号在接收端是一个差分的接收器,但其中一端固定接参考电压,而另一端接单端信号线.输入信号电压与参考电压之间进行比较,作为判断输入信号高低的标准. 常用的伪差分电平标准有 ...