前端页面给指定的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补充------------------------------------------------ ...
随机推荐
- CodeForces 444C 线段树
想分块想了很久一点思路都没有,结果一看都是写的线段树= = ...完全忘记了还有线段树这种操作 题意:给一个数组,一种操作是改变l到r为c,还有一种操作是查询l到r的总和差 线段树记得+lazy标记 ...
- 51nod 1276
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1276 1276 岛屿的数量 题目来源: Codility 基准时间限制: ...
- SpringBoot邮件发送功能
快速入门 在Spring Boot的工程中的pom.xml中引入spring-boot-starter-mail依赖: <dependency> <groupId>org.sp ...
- hdu-2544-最短路(Bellman-Ford算法模板)
题目链接 题意很清晰,入门级题目,适合各种模板,可用dijkstra, floyd, Bellman-ford, spfa Dijkstra链接 Floyd链接 Bellman-Ford链接 SPFA ...
- POJ - 2187:Beauty Contest (最简单的旋转卡壳,求最远距离)
Bessie, Farmer John's prize cow, has just won first place in a bovine beauty contest, earning the ti ...
- 消息队列mq总结(重点看,比较了主流消息队列框架)
转自:http://blog.csdn.net/konglongaa/article/details/52208273 http://blog.csdn.net/oMaverick1/article/ ...
- python3 之 格式化json
import json json_string = None with open("json_file.json") as f: json_string = f.read() tr ...
- GPIO编程2:使用GPIO监听中断完整程序
一个完整的使用GPIO捕捉中断的程序: #include<stdlib.h> #include<stdio.h> #include<string.h> #inclu ...
- iperf 网络测速
1.介绍 1) # ipref -g //这个最直观 2)Iperf 是一个网络性能测试工具.Iperf可以测试最大TCP和UDP带宽性能.Iperf具有多种参数和UDP特性,可以根据需要调整. ...
- 机器学习:集成学习(OOB 和 关于 Bagging 的更多讨论)
一.oob(Out - of - Bag) 定义:放回取样导致一部分样本很有可能没有取到,这部分样本平均大约有 37% ,把这部分没有取到的样本称为 oob 数据集: 根据这种情况,不对数据集进行 t ...