js实现的简单遮罩层
超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前loading,执行成功后loaded
/*
* 显示loading遮罩层
*/
function loading() {
var mask_bg = document.createElement("div");
mask_bg.id = "mask_bg";
mask_bg.style.position = "absolute";
mask_bg.style.top = "0px";
mask_bg.style.left = "0px";
mask_bg.style.width = "100%";
mask_bg.style.height = "100%";
mask_bg.style.backgroundColor = "#777";
mask_bg.style.opacity = 0.6;
mask_bg.style.zIndex = 10001;
document.body.appendChild(mask_bg); var mask_msg = document.createElement("div");
mask_msg.style.position = "absolute";
mask_msg.style.top = "35%";
mask_msg.style.left = "42%";
mask_msg.style.backgroundColor = "white";
mask_msg.style.border = "#336699 1px solid";
mask_msg.style.textAlign = "center";
mask_msg.style.fontSize = "1.1em";
mask_msg.style.fontWeight = "bold";
mask_msg.style.padding = "0.5em 3em 0.5em 3em";
mask_msg.style.zIndex = 10002;
mask_msg.innerText = "正在执行,请稍后...";
mask_bg.appendChild(mask_msg);
}
/*
* 关闭遮罩层
*/
function loaded() {
var mask_bg = document.getElementById("mask_bg");
if (mask_bg != null)
mask_bg.parentNode.removeChild(mask_bg);
}
js实现的简单遮罩层的更多相关文章
- Jquery超简单遮罩层实现代码
看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...
- js关于弹也遮罩层
1:什么是遮罩层 遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2: 弹出层效果居中分析 在这 ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- layer遮罩层 简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
- 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)
虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...
随机推荐
- Spring MVC 跳转失败,但配置正确填坑
1:正确写法 @RequestMapping("{type_key}.html") public String geren(Model model, @PathVariable S ...
- opencl(九)----标量、向量数据类型
1.opencl 标量数据类型 bool char unsigned char/uchar short 16位有符号整数(补码) ushort int 32位有符号整数(补码) uint 32位无符号 ...
- bzoj 1001 原图最小割转化为对偶图最短路
题目大意: 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形 ...
- python基础:5.请编写一个函数实现将IP地址转换成一个整数。
如 10.3.9.12 转换规则为: 10 00001010 3 00000011 9 ...
- ruby语法之方法
ruby中的方法相当于python的函数 其定义规则为: 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常量,从而导致不正确地解析调用. 方法应在调用之前定义,否则 ...
- <三剑客> 老二:sed命令用法
sed命令的用法: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space ...
- python/pandas 正则表达式 re模块
目录 正则解说 中文字符集 re模块常用方法 1.正则解说 数量词的贪婪模式与非贪婪模式 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪) ...
- Hive date_trunc函数
The function date_trunc is conceptually similar to the trunc function for numbers. date_trunc('field ...
- Nginx (限速)限制并发、限制访问速率、限制流量
Nginx 限制并发访问速率流量,配置还是简单的,看下Nginx文档根据文中这三个模块对照看一下就可以,Nginx限速使用的是漏桶算法(感兴趣可以看下文末的参考资料),需要注意的是:当需要进行限速操作 ...
- Java学习之多线程(定义)
进程:正在运行中的程序线程:负责执行程序的控制单元(执行路径)一个进程中可以有多个执行路径,称之为多线程一个进程中至少要有一个线程 创建新执行线程有两种方式 一.继承Thread类步骤:1.定义一个类 ...