前端页面给指定的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补充------------------------------------------------ ...
随机推荐
- Android开发中java.lang.RuntimeException: Unable to start activity ComponentInfo{xxx}
Android开发中java.lang.RuntimeException: Unable to start activity ComponentInfo{xxx}: java.lang.NullPoi ...
- SMOTE RF MLP demo use cross_val_score to find best argument 处理不平衡数据的demo代码 先做smote处理 再用交叉验证找到最好的模型参数 实践表明MLP更好
# _*_coding:UTF-8_*_ from sklearn.externals.six import StringIO from sklearn import tree import pydo ...
- /var/adm/wtmp文件太大该怎么办?
/var/admin/wtmp文件记录所有用户的登陆信息,随着时间会增长到很大,/var/adm/wtmp文件太大该怎么办呢?先来看看/var/adm/wtmp文件的属性:testterm1:/#ls ...
- [1]移动端页面调试之“weinre大法”
前言 这个也是从早读课转载的.如有侵权请联系我马上下架. 正文从这开始-- 移动端页面调试一般分两步.第一步我们需要把本地(pc端)写的页面效果展现在移动端,一个很方便的办法是用 fiddler 作为 ...
- mac环境下利用MAMP配置PHPStorm
刚刚准备搞php稍微研究一下,结果第一步就卡到了.各种配置问题,教程找了又找,找了又找,总算是成功了.纪念一下.配置截图.同时解决phpstorm 不能接受post 表单数据的问题. 推荐大家支持正版 ...
- 剑指offer--9.字符串的排列
next_permutation(),还是那个feel ------------------------------------------------------------------------ ...
- 剑指offer--8.调整数组顺序使奇数位于偶数前面
习惯了简单 ------------------------------------------------- 时间限制:1秒 空间限制:32768K 热度指数:422906 本题知识点: 数组 题目 ...
- New Year and Counting Cards
Your friend has n cards. You know that each card has a lowercase English letter on one side and a di ...
- LeetCode Longest Uncommon Subsequence II
原题链接在这里:https://leetcode.com/problems/longest-uncommon-subsequence-ii/#/description 题目: Given a list ...
- Websphere中的几个常用概念
什么是单元(Cell)?什么是节点(Node)?Node.Profile 与 Server 之间的关系是什么? 答: 单元: 单元是整个分布式网络中一个或多个节点的逻辑分组.单元是一个配置概念,是管理 ...