前端页面给指定的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补充------------------------------------------------ ...
随机推荐
- chromedriver驱动的浏览器和真实浏览器之间的差异
一. 打印百度首页底部的声明 如图,想打印@2018 Baidu...后面的一长串文字,可以通过class name定位的形式 可以看出,只有一个class name是"copyright- ...
- 如何学习Android系统源码(转)
一. Android系统的源代码非常庞大和复杂,我们不能贸然进入,否则很容易在里面迷入方向,进而失去研究它的信心.我们应该在分析它的源代码之前学习好一些理论知识,下面就介绍一些与Android系统相关 ...
- Python文件练习
练习内容: 使用Python管理ini文件:实现查询,添加,删除,保存操作. 练习目的: 1.掌握文件基本操作 2.认识ini文件 3.了解ConfigParser: ini配置文件格式: 节:[se ...
- 2018.7.30 Designing a Qi-compliant receiver coil for wireless power systems
1) 找资料: http://www.mouser.cn/datasheet/2/389/stwlc33-1156583.pdf https://training.ti.com/wireless-po ...
- 如何选择MySQL数据库的安装方式
MySQL数据库安装有yum安装,rpm安装,二进制编译安装,cmake,或者make安装,但是选择什么样的安装方式则全看实际应用场景. 下为网友总结安装方式选择: 若是对数据库要求不太高的场景 ...
- np.unique 的实现
1. 简单实现 import numpy as np def unique(ar): perm = ar.argsort() aux = ar[perm] flag = np.concatenate( ...
- 【pandas】pandas.DataFrame.rename()---重置索引名称
官方文档 github地址 例子: 创建DataFrame ### 导入模块 import numpy as np import pandas as pd import matplotlib.pypl ...
- string类的常用功能演示
这个程序可用随着我对string的用法的增多而有调整. /* 功能说明: string类的常用功能演示. 实现方式: 主要是演示string的常用函数的用法和它与字符数组的区别与联系 限制条件或者存在 ...
- Linux中sort和uniq关于排序去重的那些用法
相信在Linux下对文件操作经常会用到sort和uniq命令,下面系统的介绍一下这两个命令的用法. sort命令是在Linux里非常有用,它将文件进行排序,并将排序结果标准输出.sort命令既可以从特 ...
- LeetCode 298. Binary Tree Longest Consecutive Sequence
原题链接在这里:https://leetcode.com/problems/binary-tree-longest-consecutive-sequence/ 题目: Given a binary t ...