layer彈出層擴展主題的方法

2019-11-19 10:49:59

字體：大中小

來源：轉載

供稿：網友

彈出層插件layer確實很強大，官方提供主題太少，但是提供擴展的方式，由于項目使用統一顏色風格，就想擴展一下。官方默認的三種：

1.白藍(默認)

layer.alert('內容');//默認

2.墨綠

layer.alert('內容', { icon: 1, skin: 'layui-layer-molv'})

3.深藍

layer.alert('內容', { icon: 1, skin: 'layui-layer-lan'})

==========重點啦===================================

下面以擴展橙色為例:

從官方下載的庫目錄結構應該是:

1.在文件夾theme下新建目錄orange，這個目錄可以放css文件，用到的圖片等(可以直接復制default目錄的文件)

2.文件layer.css名字不要修改，清空文件里的內容，擴展自己的內容(這些css也不是我隨意寫的,可以參數文件夾default里的layer.css 搜索layui-layer-molv,參考它的寫,打開瀏覽器debug模式,查看引用哪個css樣式，我們都可以自己擴展修改它)，layui-layer-orange 這個名字當然可以隨意起。

body .layui-layer-orange .layui-layer-title{background:#ff9000; color:#FFFFFF; border: none;}body .layui-layer-orange .layui-layer-btn a{background:#ff9000;color:#FFFFFF;}body .layui-layer-orange .layui-layer-btn .layui-layer-btn1{background:#ff9000;}body .layui-layer-orange .layui-layer-btn .layui-layer-btn0{border: none;}

3.頁面中使用擴展后的樣式

layer.config({ extend: 'orange/layer.css', //加載您的擴展樣式,它自動從theme目錄下加載這個文件 skin: 'layui-layer-orange' //layui-layer-orange這個就是上面我們定義css 的class});

4.測試下哈哈

layer.alert('layer皮膚-Yourskin');layer.confirm('您是如何看待前端開發？', { btn: ['重要','奇葩'] //按鈕}, function(){ layer.msg('的確很重要', {icon: 1});}, function(){ layer.msg('也可以這樣', { time: 20000, //20s后自動關閉 btn: ['明白了', '知道了'] });});

效果: