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

 $("<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. 分享知识-快乐自己:HashMap 与 HashTable 的区别

    特性: HashMap 与 Hashtable 的分析: 1):HashMap简介 1.底层数组+链表实现,可以存储null键和null值,线程不安全 2.HashMap 不是线程安全的 3.Hash ...

  2. 机器学习(六)—随机森林Random Forest

    1.什么是随机采样? Bagging可以简单的理解为:放回抽样,多数表决(分类)或简单平均(回归): Bagging的弱学习器之间没有boosting那样的联系,不存在强依赖关系,基学习器之间属于并列 ...

  3. 在C#中,Json的序列化和反序列化的几种方式

    摘自:http://www.cnblogs.com/caofangsheng/p/5687994.html 在这篇文章中,我们将会学到如何使用C#,来序列化对象成为Json格式的数据,以及如何反序列化 ...

  4. 20165210 Java第二次实验报告

    20165210 实验二 Java面向对象程序设计 一.面向对象程序设计1--单元测试和TDD 实验要求 参考 http://www.cnblogs.com/rocedu/p/6371315.html ...

  5. 【机器学习】集成学习之xgboost的sklearn版XGBClassifier使用教程

    XGBClassifier是xgboost的sklearn版本.代码完整的展示了使用xgboost建立模型的过程,并比较xgboost和randomForest的性能. # -*- coding: u ...

  6. Storm实时计算:流操作入门编程实践

    转自:http://shiyanjun.cn/archives/977.html Storm实时计算:流操作入门编程实践   Storm是一个分布式是实时计算系统,它设计了一种对流和计算的抽象,概念比 ...

  7. LeetCode 298. Binary Tree Longest Consecutive Sequence

    原题链接在这里:https://leetcode.com/problems/binary-tree-longest-consecutive-sequence/ 题目: Given a binary t ...

  8. bzoj 4559 [JLoi2016]成绩比较——拉格朗日插值

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4559 关于拉格朗日插值,可以看这些博客: https://www.cnblogs.com/E ...

  9. zabbix3.2.1安装graphtrees插件

    https://blog.csdn.net/liang_baikai/article/details/53542317 graphtree介绍 由于zabbix的图像显示一块不太友好,图像没法集中显示 ...

  10. dockerfile http_php

    FROM centos6.6-php5.5:0.0.1 MAINTAINER syberos:wangmo RUN mv /etc/php.ini /etc/php.ini.bak COPY ./ph ...