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

 $("<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. 使用饿了么ui表单验证报错: [Element Warn][Form]model is required for validat

    [Element Warn][Form]model is required for validat 如文末的完整例子: 该提示说的是 form表单需要一个绑定一个 对象(使用:model=" ...

  2. 用urliso把linux刻录U盘失败无数次。 用unetbootin试试可以启动的。

    我用的是ubuntu 16.04 lts 画面挺好用的.

  3. 简单使用location.hash的方法 ,怎么做,有什么用? 简单的js路由页面方法。

    hash 属性是一个可读可写的字符串,该字符串是URL的锚部分(从#号开始的部分).语法location.hash刚开始我真不知道hash有什么用,直到我在项目中遇上一个最大的问题.而且很恶心的体验 ...

  4. Django-进阶

    分页 Django的分页器(paginator) view from django.shortcuts import render,HttpResponse # Create your views h ...

  5. 28 python 并发编程之多进程

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...

  6. LeetCode OJ:House Robber(住宅窃贼)

    You are a professional robber planning to rob houses along a street. Each house has a certain amount ...

  7. 《ASP.NET夜话》 - 书摘精要

    (P14) 如果客户端启用了Cookie,那么客户端与服务器之间通过Cookie来传递SessionID的值:如果客户端没有启用Cookie,就会通过URL来传递SessionID的值: (P15) ...

  8. vs2012 sln和.vcxproj有什么区别

    sln是解决方案的配置,主要是管理这个方案里的多个vcxprojvcxproj是工程的配置文件,管理工程中细节比如包含的文件,引用库等一般没有sln,也可以直接打开vcxproj,也可以重新生成sln ...

  9. ICE的Glacier2使用

    1.使用Glacier2的步骤:   A.编写一个Glacier2的配置文件,参见样例   B.设置Glacier2的访问鉴权(密码或者证书),passwords文件每行样例"test xx ...

  10. notepad++怎么显示项目的目录树?

    转:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1013/1762.html