layui彈出層基礎引數

2022-03-12 07:58:54 字數 2278 閱讀 6642

一、type-層型別

型別:number  預設為0(資訊框);

1(頁面層),可以在頁面新增html內容

2(iframe層)

3(載入層)載入時顯示的彈出框

4(tips層)

需要繫結id就不展示了

二、title標題

引數型別:string, array, boolean

string :即標題的文字

array: 即css樣式,如color:yellow

boolean:不展示標題時可設定為flase

三、content內容

引數型別: string, dom, array

string: 內容是字串

dom: 獲取乙個dom的元素,根據id等,可能對原有html**有影響,最好放在body最外層(?)

array: 當使用layer.open執行tips層時,需要填入tips層的三項必填項

三、skin(樣式類名)

引數型別:string, 預設為空可以傳入自定義的class來完成自定義樣式

這是layer**製作說明

skin: 'layui-layer-molv'效果如下:
四、area(寬高)

引數型別:string, array 預設 'auto'

string: 單獨定義寬度時,設定乙個引數即可定義寬度

array: 寬高度都自定義時,即為兩個引數

五、offset(座標)

引數型別:string, array 預設'auto' 垂直水平居中

string: 'auto' 垂直水平居中;  '100px' top座標,水平居中; 

填入html簡略詞時同樣有效:

t:頂部;r:右邊緣; b:底部;l:左邊緣; lt:左上角;rt:右上角;lb:左下角; rb:右下角

array: ['100px', '50px'] 同時設定垂直水平座標

六、icon(圖示)

引數型別:number, 預設不顯示圖示,若想顯示則引數是0~6數字

七、btn(按鈕)

引數型別:string, array 預設:'確認'

可以為兩個按鈕繫結**方法

layer.confirm('納尼?', 

八、btnalign(按鈕排列)

引數型別:string 預設為右

九、closebtn(關閉按鈕)

引數型別:string, boolean 預設1即原始樣式,下面是2的樣式

十、shade(遮罩)

引數型別:string, array, boolean 預設0.3

彈出層的外部區域,設定0.8透明度的#393d49顏色

array: shade: [0.8, '#393d49'] 

十一、shadeclose(是否點選遮罩層關閉)

引數型別:blooean 預設false

開啟後,點選彈出層的外層區域即可關閉彈出層

十二、time(自動關閉所需毫秒)

引數型別:number 預設0,即不會自動關閉,自動關閉時設定時間即可

十三、 

模擬layui彈出層

以前覺得自己手寫乙個類似layui的彈出層是挺遙遠的事,因為完全沒有頭緒,即便在layui官網知道layui使用的都是c3動畫 之前試過控制width 0 height 0來做動畫,結果慘不忍睹,直到幾天前靈機一動聯想到了transform的scale屬性,才稍微觸及到了皮毛 為了不新增格外的htm...

layui框架(彈出層和輪播)

一 彈出層 src layer.js script layer.msg hello script 2 在 layui 中使用 layer layui.use layer function script 3 彈出層屬性的使用方法type 基本層型別 layer提供了5種層型別 可傳入的值有 0 資訊框...

layui彈出層根據瀏覽器大小選擇彈出層大小

layui彈出層根據螢幕大小選擇彈出層大小 彈出層方法 layer.open 判斷瀏覽器大小方法 function screen else if width 992 else if width 768 else 1 window width 需要引用jquery.js檔案,它是jquery方法。而w...