ModalLayer弹窗控件(原创)

所属分类：UI-弹出层,对话框,工具提示

17094 195 查看评论 (3)

分享到微信朋友圈

查看演示立即下载

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

更新时间：2021-08-13 19:28:51

更新说明：

代码示例位于example中.
整个重构, 详细请打开doc文件夹中的index.html进行查看.(需要web服务器).
使用gulp进行处理合并与压缩任务.
如果需要进行修改请先安装ndoejs.
本次发布比较仓促, 可能会有一些问题, 如果各位有发现问题, 请及时告知我, 谢谢.

更新时间：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	音乐层, 一个音乐播放器(未实现)

开发用属性

属性	可选值	描述
statu	hide show expand minimize removing removed drag resize	模态层状态
globalVariable	object	临时变量存放, 为了不污染全局变量设置, 实例共享变量时可以使用
timeoutClock	array	当前实例所使用到的延时执行器
intervalClock	array	当前实例所使用到的间隔执行器
instance	array	所有模态层列表(静态属性)
minimizeList	array	所有最小化模态层列表(静态属性)
assistant	object	助手类列表(静态属性)
enum	object	枚举列表(静态属性)