话不多说,先上代码,其实还是比较简单的

 $("<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添加遮罩层,并且带有加载中的小旋转图片的更多相关文章

  1. 基于Bootstrap的遮罩层,带有加载提示

    1.body中的html <div class="modal fade" id="loadingModal"> <div style=&quo ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  4. 使用jQuery加载html页面到指定的div

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  5. 利用div实现遮罩层效果

    利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> &l ...

  6. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

  7. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  8. 前端小结(3)---- 添加遮罩层,并弹出div

    有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...

  9. 使用layer的弹窗时,出现layer引入成功,触发成功,控制台无报错,但是页面无变化或者仅出现遮罩层的问题的解决思路

    ------------------------------------------20180410补充------------------------------------------------ ...

随机推荐

  1. poj2289二分图多重匹配

    题意:给你一张二分图,求右边点到汇点的最小容量(保证流量为n)是多少 题解:二分答案,每次重新建边跑最大流,看是不是为n就好了 #include<map> #include<set& ...

  2. 继续吐槽XE5中的boost::thread问题:找不到CC32130MT.DLL

    在XE5中,随便创建一个HelloWorld程序,加入boost::thread的功能,编译链接后,无法运行,无法调试,提示找不到CC32130MT.DLL 这个DLL名字看上去好像是跟多线程有关的, ...

  3. 使用Intellij Idea打开项目不能显示树形目录

    按下列步骤操作:1. 关闭IDEA, 2.然后删除项目文件夹下的.idea文件夹3.重新用IDEA工具打开项目 Open...

  4. html5视频video积累

    又是好几个月没有写东西,还是太懒散了~必须要教育下自己罗~ 这次做了个播放视频的移动H5,之前没有仔细玩过,好好记录下基本知识,还有遇到的一些坑,方便之后再次遇见后进行解决 一.基本 video标签在 ...

  5. Maven环境下多模块项目构建

    Maven环境下多模块项目构建 一.新建项目 1.建立我们的父模块par 2.建立我们的子模块dao层 3.建立我们的子模块service层 4.建立我们的子模块web层 5.全部配置完成后,怎么把我 ...

  6. hawq创建filespace,tablespace,database,table

    使用HAWQ   在HAWQ的使用上跟Greenplum基本就一样一样的了.比如:   1. 创建表空间 #选创建filespace,生成配置文件 [gpadmin@master ~]$ hawq f ...

  7. Milking Time(DP)

    个人心得:一开始自己找状态,是这么理解的,只要前面一个满足就等于此时的值加上d(n-1),否则就是不挖此时的比较d(n-1)和 d(n-2)+cost,不过仔细一想忽略了很多问题,你无法确定n-2和此 ...

  8. Linux基础命令-文本文件查看工具

    文本文件查看工具 cat concatenate 文本文件查看工具 cat /etc/fstab cat [OPTION]... [FILE]... -n:给显示的文本行编行 -E:显示行结束符 ta ...

  9. docker 镜像自动升级脚本

    #!/bin/bash # Let's finish it like a flash ARGS=`getopt -o v:"$@"` echo $# if [ $# != 2 ]; ...

  10. Python网络编程中的select 和 poll I/O复用的简单使用

    首先列一下,sellect.poll.epoll三者的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select ...