ModalLayer弹窗控件(原创)

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

 17743  196  查看评论 (3)
分享到微信朋友圈
X
ModalLayer弹窗控件(原创) ie兼容11

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

更新说明:

  1. 代码示例位于example中.

  2. 整个重构, 详细请打开doc文件夹中的index.html进行查看.(需要web服务器).

  3. 使用gulp进行处理合并与压缩任务.

  4. 如果需要进行修改请先安装ndoejs.

  5. 本次发布比较仓促, 可能会有一些问题, 如果各位有发现问题, 请及时告知我, 谢谢.


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


相关插件-弹出层,对话框,工具提示

jQuery弹框、弹出层插件method.js

jq弹框 弹框标题、内容、宽高、取消确认按钮、关闭按钮、动效类型均可以参数的形式设置
  弹出层
 52503  398

各种弹窗alert

jquery弹窗
  弹出层
 67306  374

jQuery弹出层插件

可无限次弹出,自己设置大小,手动调整大小都可(相比于layer.js要轻量)
  弹出层
 39483  318

18种弹框特效

18种弹框特效
  弹出层
 89324  892

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    小雷17600979446 0
    2020/9/27 16:26:52
    我想知道怎么手动设置宽高...
        夜幕下灬雪狼1
        2020/10/28 21:39:41
        areaProportion 参数可以.
    回复
    夜幕下灬雪狼 0
    2020/7/18 4:06:23
    ....就没人来评论一下么...嘤嘤嘤~~~ 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复