html弹窗中的layer,ModalLayer弹窗控件(原创)

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

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

html弹窗中的layer,ModalLayer弹窗控件(原创)相关推荐

在VS2010/MFC中如何对对话框添加控件
创建对话框资源需要创建对话框模板.修改对话框属性.为对话框添加各种控件等步骤.而如何为对话框添加控件直接影响到界面的美观和开发人员的工作效率.本人将为大家介绍如何为对话框添加控件的详细步骤. 方法/步 ...
WPF 中动态创建和删除控件
WPF 中动态创建和删除控件原文:WPF 中动态创建和删除控件动态创建控件 1.容器控件.RegisterName("Name",要注册的控件) //注册控件 2.容器控件 ...
MFC中如何让一个CStatic控件响应消息
在MFC中有时需要自己Create控件,如何写一个可以响应消息的控件呢,例如:CStatic 如下: CStatic test; test.Create("my static", ...
android tv 开发布局,Android TV开发总结（七）构建一个TV app中的剧集列表控件
前言:剧集类控件,在TV app中非常常见,今天将介绍构建一个TV app中的剧集列表控件,此控件上传到我的Github:https://github.com/hejunlin2013/Episode ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
Delphi 7 中使用IdUDPServer1和IdUDPClient1控件实现通信检测
Delphi 7 中使用IdUDPServer1和IdUDPClient1控件实现通信,可是如何检测两台电脑已经连通了?代码怎么写啊?求大神 D7确实经典,但已经落伍了,用xe版本吧 udp发送这个东 ...
VS2010中如何实现自定义MFC控件
本文简要讲解在VS2010中怎样实现自定义MFC控件的知识,以下是分步骤说明. 一.自定义一个空白控件 1.先创建一个MFC工程 NEW Project-->MFC-->MFC Appl ...
Qt 在designer 中给QToolBar 添加 action控件
Qt 在designer 中给QToolBar 添加 action控件 1.在action editor 添加控件 SendData不出现使用打钩时 2. 使用鼠标直接拖拽到Ui指定位置
delphi中利用Indy的TIdFtp控件实现FTP协议
2019独角兽企业重金招聘Python工程师标准>>> delphi中利用Indy的TIdFtp控件实现FTP协议版权声明:本文为博主原创文章,未经博主允许不得转载.现在很多应用都需 ...

html弹窗中的layer,ModalLayer弹窗控件(原创)

html弹窗中的layer,ModalLayer弹窗控件(原创)相关推荐

最新文章

热门文章