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 整合rabbitMQ
<!-- 配置邮件消息队列监听 --> <bean id="maillistener" class="cn.xdf.wlyy.listener.Mail ...
- Flutter日曆國際化
Flutter自带的日期选择器是showDatePicker,时间选择器是showTimePicker. 这两个选择器默认的显示效果都是英文的,我们是在中国,那么就需要将其显示成中文版的,这就涉及到F ...
- springboot支持webSocket和stomp实现消息订阅通知示例
先导入支持websocket的jar包,这里用Gradle构建的项目: dependencies { compile('org.springframework.boot:spring-boot-sta ...
- Pycharm的debug单步调试
首先设置断点,点击行号显示的一侧,在指定行设置断点.比如这里,我们设断点在创建对象时: .如果这时我们直接右键run这个代码.他还是会直接运行,不会理会断点 结果 所以要右键选择run下面的debug ...
- promise函数
一.promise函数是干什么的 promise函数是解决异步编程调用代码逻辑编写过于复杂的问题的,当网络请求非常复杂时,就会出现回调地狱,这样如果将这些代码写在一起就会看起来很复杂,且不利于阅读,如 ...
- 4412 最简Linux驱动
最简Linux驱动 必备的头文件 • Linux头文件位置– 类似#include <linux/module.h>的头文件,它们是在Linux源码目录下的include/linux/mo ...
- ES6中模块加载出现的问题
1.如何在浏览器中import模块 在使用模块加载时不同浏览器有不同的行为 使用 import 加载模块时,需要把script标签的type属性改为module.此时Firefox浏览器支持impor ...
- java 反射,类的加载过程以及Classloader类加载器
首先自定义一个类Person package reflection; public class Person { private String name; public int age; public ...
- delphi 判断MDI窗体的子窗体是否存在
//***************************************************************************//函 数名: CreateForm //返 ...
- python实现计时器(装饰器)
1.写一个装饰器,查看函数执行的时间 import time # 装饰器run_time,@run_time加在谁头上,谁就是参数fundef run_time(fun): start_time = ...