超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前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实现的简单遮罩层的更多相关文章

  1. Jquery超简单遮罩层实现代码

    看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式: 1.样式如下设置: CSS代码: <style type="text/css"> .mask { pos ...

  2. js关于弹也遮罩层

    1:什么是遮罩层 遮罩层:我是弹也一个(遮罩层)还有一个(内容层),下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2:  弹出层效果居中分析 在这 ...

  3. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  4. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  6. JS+CSS简单实现DIV遮罩层显示隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  8. layer遮罩层 简单的遮罩层

    在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网 多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...

  9. 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

随机推荐

  1. phpstorm 各种报错

    1.启动时报错 Failed to load module "canberra-gtk-module" 解决方法:libcanberra-gtk-module sudo apt-g ...

  2. Redis服务器中有75%受到恶意软件感染

    尽管由于配置错误的服务器和应用程序而导致新的网络攻击不断出现,但人们仍然忽略安全警告. 近两个月前,中国知名黑客组织东方联盟研究人员警告说,一项针对开放Redis服务器的大规模恶意软件活动现在已经发展 ...

  3. maven插件之maven-surefire-plugin,junit单元测试报告和sonar测试覆盖率的整合说明

    POM中配置的如下: <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId> ...

  4. paper 154:姿态估计(Hand Pose Estimation)相关总结

    Awesome Works  !!!! Table of Contents Conference Papers 2017 ICCV 2017 CVPR 2017 Others 2016 ECCV 20 ...

  5. delphi按字节长度分割字符串函数(转)

    此字符串分割函数用delphi编写,可以适应字符串中存在双字节字符和单字节字符. function TricheditEfm.SplitString(source:string;Sleng:Integ ...

  6. GameObject.Find

    代码演示: using System.Collections;using System.Collections.Generic;using UnityEngine; public class Game ...

  7. Spring中Configuration的理解

    基本用途从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法,这些方法将会被AnnotationConfigAp ...

  8. leetcode-解题记录 884. 两句话中的不常见单词

    题目 给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回所有不 ...

  9. <读书笔记>《锋利的jQuery》

    2016年4月3日 第4章 jq中的事件和动画 4.1 jq中的事件 (1)window.onload.$(documet).ready()的区别: 1.执行时机:window.onload需要整个页 ...

  10. python自带的split VS numpy中的split比较

    Python split() 通过指定分隔符对字符串进行切片,如果参数 num 有指定值,则分隔 num+1 个子字符串 str1.split() 里面的参数,可以是空格,逗号,字符串啥的,具体应用与 ...