插件描述：原生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弹窗控件(原创)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。