html弹窗中的layer,ModalLayer弹窗控件(原创)

插件描述：原生JS编写的弹窗控件ModalLayer，使用了ES6的一些新特性.

更新时间：2020-01-07 00:27:13

简介

由原生JS编写的一套弹窗控件, 写的可能不是很好, 可能会尝试一些之前没用使用过的技术(小白鼠?), 会尽力完善的.

之后的视频层打算使用video.js实现.

对调用不太清楚的可以看一下示例页面, 就酱~~~

注意: option中声明方法时如果使用箭头函数则无法正确绑定this对象(箭头函数没有this对象), 请使用匿名函数的形式绑定方法

引入文件

使用之前请先引入如下文件文件名描述

modallayer.min.js模态层js以及工具类的压缩文件,如果报错请分别引入modallayer.js以及util.js

modallayer.min.css模态层基础样式以及默认样式,如果出现问题请分别引入modallayer.css以及default.css

初始化let options = {};

// 直接使用封装好的静态方法

ModalLayer.msg(options);

Modallayer.msg('message');

ModalLayer.alert(options);

ModalLayer.prompt(options);

// 自行构造对象

let modallayer = new ModalLayer(options);

// 刷新大小

modallayer.resize();

// 展示模态层

modallayer.show();

模态层类型类型描述

msg消息层, 没有多余操作, 仅仅作为消息提醒使用

alert提示层, 与消息层差别不大, 多了按纽栏和关闭按钮

prompt交互层, 自定义输入信息, 可以作为表单使用

confrim询问层, 两种不同意见的选择框

page页面层, 可以展示另一个页面

loading加载层, 展示一个加载中的动画, 作为过渡(未实现)

image图片层, 预览图片(未实现)

video视频层, 一个视频播放器(未实现)

audio音乐层, 一个音乐播放器(未实现)

开发用属性属性可选值描述

statuhide show expand minimize removing removed drag resize模态层状态

globalVariableobject临时变量存放, 为了不污染全局变量设置, 实例共享变量时可以使用

timeoutClockarray当前实例所使用到的延时执行器

intervalClockarray当前实例所使用到的间隔执行器

instancearray所有模态层列表(静态属性)

minimizeListarray所有最小化模态层列表(静态属性)

assistantobject助手类列表(静态属性)

enumobject枚举列表(静态属性)