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 ...
随机推荐
- nyoj 1022:合纵连横(并查集删点)
题目链接 参考链接 只附代码好了 #include<bits/stdc++.h> using namespace std; ; int a[N],b[N],vis[N]; int n,m, ...
- 0-2马尔可夫过程Markov Processes
在0-1中提到了,当最终output的p=0时,这个时候模型无法正常使用,为了解决这个问题,在0-4中会有所提及. 在本节中,其实,计算概率的时候,我们应该假设某一个位置的词与它前面的所有词都是相关的 ...
- python多个装饰器
'''在装饰器中加上参数:1.实现在源代码中加上时间统计:函数timmer2.实现用户名认证功能:函数auth23.实现一次认证,刷新后自动登录功能,index函数已经认证并登录,在执行home函数时 ...
- leetcode简单刷题
[python3]参数中的冒号与箭头 冒号后面是建议传入的参数类型 箭头后面是建议函数返回的类型
- Spring框架之接口实现覆盖(接口功能扩展)
在日常开发中,存在着这种一种场景,框架对接口A提供了一个种默认的实现AImpl,随着需求的变更,现今AImpl不能满足了功能需要,这时,我们该怎么办? 当然是修改AImpl的实现代码了,但是,如果它是 ...
- spring-boot整合Mybatis多数据源案例
1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...
- Spring Boot学习一之Spring Beans和依赖注入
你可以自由地使用任何标准的Spring框架技术去定义beans和它们注入的依赖.简单起见,我们经常使用 @ComponentScan 注解搜索beans,并结合 @Autowired 构造器注入. 如 ...
- spring-cloud config配置中心
这里那些概念不说,主要是记录下spring cloud config配置中心的服务端和客户端的一个demo. 服务端即提供统一配置文件 客户端即从服务端读取配置 1.新建一个spring boot项目 ...
- 建站手册-浏览器信息:苹果 Safari 浏览器
ylbtech-建站手册-浏览器信息:苹果 Safari 浏览器 1.返回顶部 1. http://www.w3school.com.cn/browsers/browsers_safari.asp 2 ...
- 【转】Selenium 加载Chrome/Firefox浏览器配置文件
原文地址:https://www.cnblogs.com/eastonliu/p/9083982.html Selenium启动浏览器时,默认是打开一个新用户,不会加载原有的配置以及插件.但有些时候我 ...