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

 $("<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. selenium对富文本框的处理

    一般输入框有以下几种形式 第一种:短的input框 如百度首页的输入框,<input type="text" class="s_ipt" name=&qu ...

  2. Spring_总结_03_装配Bean(三)_XML配置

    一.前言 本文承接上一节:Spring_总结_03_装配Bean(二)之Java配置 上一节说到,当需要显示配置时,首选类型安全并且比XML更强大Java配置. 那什么时候使用XML配置呢? (1)维 ...

  3. localtime 和 localtime_r 的区别

    转自:http://blog.csdn.net/maocl1983/article/details/6221810 #include <cstdlib> #include <iost ...

  4. Office 2007在安装过程中出错

    1, 可能是因为c:\program files\common files\microsoft Shared\web server Extensions\40\bin目录下缺少Fp4autl.dll, ...

  5. npm镜像安装

    安装淘宝NPM镜像 https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 配置 ...

  6. 学习动态性能表(15)--v$rollstat

    学习动态性能表 第15篇--V$ROLLSTAT  2007.6.12 本视图自启动即保持并记录各回滚段统计项.在学习本视图之前,我们先来了解一下回滚段(rollback segment)的相关概念: ...

  7. 学习动态性能表(7)--v$process

    学习动态性能表 第七篇--V$PROCESS  2007.5.30 本视图包含当前系统oracle运行的所有进程信息.常被用于将oracle或服务进程的操作系统进程ID与数据库session之间建立联 ...

  8. linux 标准化

    Unix 1969 年诞生于 AT&T 贝尔实验室,并在 1973 年使用 C 语言进行了重写,从此就具有了很好的可移植性.但是当 AT&T 在 1984 年由于分拆而得以进入计算机领 ...

  9. 反射ORM 三层(for oracle)

    sql server and oracle 不同之处只在于: 1·参数@和: 2·自增和序列 3·oracle使用了存储过程以获得当前插入数据的ID DAL层的ORM using Oracle.Dat ...

  10. 引用com.sencha.gxt.ui.GXT加载错误解决方案

    环境GWT2.7+GXT4.0 <inherits name='com.sencha.gxt.ui.GXT' /> 出现加载错误 Loading inherited module 'com ...