ModalLayer弹窗控件(原创)

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

 17806  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 弹出层

多功能表单弹出层插件,可自定义,附带可运行
  弹出层
 98587  718

jQuery弹窗插件

支持拖拽,放大,缩小,最小化窗口的符合jquery语法规范的插件
  弹出层
 38417  330

带动画效果jQuery+CSS3实现的弹出框弹出层效果

带动画效果jQuery+CSS3实现的弹出框弹出层效果
  弹出层
 90299  454

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 58388  482

讨论这个项目(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
    ....就没人来评论一下么...嘤嘤嘤~~~ 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复