插件描述：原生JS編寫的彈窗控件ModalLayer，使用了ES6的一些新特性.

更新時間：2020-01-07 00:27:13

簡介

由原生JS編寫的一套彈窗控件, 寫的可能不是很好, 可能會嘗試一些之前沒用使用過的技術(shù)(小白鼠?), 會盡力完善的.

之后的視頻層打算使用video.js實現(xiàn).

對調(diào)用不太清楚的可以看一下示例頁面, 就醬~~~

注意: option中聲明方法時如果使用箭頭函數(shù)則無法正確綁定this對象(箭頭函數(shù)沒有this對象), 請使用匿名函數(shù)的形式綁定方法

引入文件

使用之前請先引入如下文件文件名描述

modallayer.min.js模態(tài)層js以及工具類的壓縮文件,如果報錯請分別引入modallayer.js以及util.js

modallayer.min.css模態(tài)層基礎(chǔ)樣式以及默認樣式,如果出現(xiàn)問題請分別引入modallayer.css以及default.css

初始化let?options?=?{};

//?直接使用封裝好的靜態(tài)方法

ModalLayer.msg(options);

Modallayer.msg('message');

ModalLayer.alert(options);

ModalLayer.prompt(options);

//?自行構(gòu)造對象

let?modallayer?=?new?ModalLayer(options);

//?刷新大小

modallayer.resize();

//?展示模態(tài)層

modallayer.show();

模態(tài)層類型類型描述

msg消息層, 沒有多余操作, 僅僅作為消息提醒使用

alert提示層, 與消息層差別不大, 多了按紐欄和關(guān)閉按鈕

prompt交互層, 自定義輸入信息, 可以作為表單使用

confrim詢問層, 兩種不同意見的選擇框

page頁面層, 可以展示另一個頁面

loading加載層, 展示一個加載中的動畫, 作為過渡(未實現(xiàn))

image圖片層, 預(yù)覽圖片(未實現(xiàn))

video視頻層, 一個視頻播放器(未實現(xiàn))

audio音樂層, 一個音樂播放器(未實現(xiàn))

開發(fā)用屬性屬性可選值描述

statuhide show expand minimize removing removed drag resize模態(tài)層狀態(tài)

globalVariableobject臨時變量存放, 為了不污染全局變量設(shè)置, 實例共享變量時可以使用

timeoutClockarray當前實例所使用到的延時執(zhí)行器

intervalClockarray當前實例所使用到的間隔執(zhí)行器

instancearray所有模態(tài)層列表(靜態(tài)屬性)

minimizeListarray所有最小化模態(tài)層列表(靜態(tài)屬性)

assistantobject助手類列表(靜態(tài)屬性)

enumobject枚舉列表(靜態(tài)屬性)

總結(jié)

以上是生活随笔為你收集整理的html弹窗中的layer,ModalLayer弹窗控件(原创)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。