插件描述：原生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 |
初始化
1 2 3 4 5 6 7 8 9 10 11 12 | 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 | 枚举列表(静态属性) |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： vue图片、文件上传
- 下一个特效： vue活动抽奖程序（带内定中奖用户版本）