更新时间: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 | 枚举列表(静态属性) |