快捷導(dǎo)航

layer彈出層擴(kuò)展主題的方法

更新時(shí)間：2019年09月11日 10:40:33 作者：木子金豐

今天小編就為大家分享一篇layer彈出層擴(kuò)展主題的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

彈出層插件layer確實(shí)很強(qiáng)大，官方提供主題太少，但是提供擴(kuò)展的方式，由于項(xiàng)目使用統(tǒng)一顏色風(fēng)格，就想擴(kuò)展一下。官方默認(rèn)的三種：

1.白藍(lán)(默認(rèn))

layer.alert('內(nèi)容');//默認(rèn)

2.墨綠

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

3.深藍(lán)

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

==========重點(diǎn)啦===================================

下面以擴(kuò)展橙色為例:

從官方下載的庫(kù)目錄結(jié)構(gòu)應(yīng)該是:

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

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

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.頁(yè)面中使用擴(kuò)展后的樣式

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

4.測(cè)試下哈哈

layer.alert('layer皮膚-Yourskin');

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

效果: