超级简单的一个实现,可能会有局限性,贵在简单易懂,使用的时候执行前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. [BZOJ1018][SHOI2008]堵塞的交通traffic 时间分治线段树

    题面 介绍一种比较慢的但是好想的做法. 网上漫天的线段树维护联通性,然后想起来费很大周折也很麻烦.我的做法也是要用线段树的,不过用法完全不同. 这个东西叫做时间分治线段树. 首先我们建一个\(1..m ...

  2. python实现简单接口

    接口实现 import flask,json server=flask.Flask(__name__)#__name__代表当前的python文件.把当前的python文件当做一个服务启动 @serv ...

  3. 【leetcode】981. Time Based Key-Value Store

    题目如下: Create a timebased key-value store class TimeMap, that supports two operations. 1. set(string ...

  4. 前端-SuperSlide自动分页控制、自适应轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用idea搭建Spring boot+jsp的简单web项目

    大家好: 这是我的第一篇博客文章,简单介绍一下Spring boot + jsp 的搭建流程,希望给跟我一样新接触Spring boot的读者一点儿启发. 开发工具:jdk1.8   idea2017 ...

  6. netty-Selector

    上图中加入一句: socketChannel.configureBlocking(false);//设置为非阻塞的 keyIterator.clear(); 每连接一个SocketChannel 都会 ...

  7. FMXUI TEXTVIEW代码设置IMAGEINDEX

    FMXUI作为一个开源的控件,真是DELPHIER的福音,向作者致敬.​TEXTVIEW非常好用,在属性面板中有ImageIndex属性,可以方便设置图标,在实际应用中图标状态需要改变,但在代码设置时 ...

  8. 540D - Bad Luck Island(概率DP)

    原题链接:http://codeforces.com/problemset/problem/540/D 题意:给你石头.剪刀.布的数量,它们之间的石头能干掉剪刀,剪刀能干掉布,布能干掉石头,问最后石头 ...

  9. Python基础教程(022)--Pycharm快速体验

    前言 熟悉掌握Python工具 内容 提示 断点调试 目的 学会了解Pycharm的使用 掌握Pycharm执行程序 掌握断点调试模式

  10. 2019 牛客暑期多校 第二场 H Second Large Rectangle (单调栈)

    题目:https://ac.nowcoder.com/acm/contest/882/H 题意:一个大的01矩阵,然后现在要求第二大的全一矩阵是多少 思路:在这里我们首先学习一下另一个东西,怎么求直方 ...