layer彈出層擴展主題的方法
更新時間：2019年09月11日 10:40:33 作者：木子金豐
今天小編就為大家分享一篇layer彈出層擴展主題的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
彈出層插件layer確實很強大，官方提供主題太少，但是提供擴展的方式，由于項目使用統(tǒng)一顏色風(fēng)格，就想擴展一下。官方默認(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'
})
==========重點啦===================================
下面以擴展橙色為例:
從官方下載的庫目錄結(jié)構(gòu)應(yīng)該是:
1.在文件夾theme下新建目錄orange，這個目錄可以放css文件，用到的圖片等(可以直接復(fù)制default目錄的文件)
2.文件layer.css名字不要修改，清空文件里的內(nèi)容，擴展自己的內(nèi)容(這些css也不是我隨意寫的,可以參數(shù)文件夾default里的layer.css 搜索layui-layer-molv,參考它的寫,打開瀏覽器debug模式,查看引用哪個css樣式，我們都可以自己擴展修改它)，layui-layer-orange 這個名字當(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.頁面中使用擴展后的樣式
layer.config({
extend: 'orange/layer.css', //加載您的擴展樣式,它自動從theme目錄下加載這個文件
skin: 'layui-layer-orange' //layui-layer-orange這個就是上面我們定義css 的class
});
4.測試下哈哈
layer.alert('layer皮膚-Yourskin');
layer.confirm('您是如何看待前端開發(fā)？', {
btn: ['重要','奇葩'] //按鈕
}, function(){
layer.msg('的確很重要', {icon: 1});
}, function(){
layer.msg('也可以這樣', {
time: 20000, //20s后自動關(guān)閉
btn: ['明白了', '知道了']
});
});
效果:
以上這篇layer彈出層擴展主題的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript Proxy基本用法，Proxy對象用于創(chuàng)建一個對象的代理，從而實現(xiàn)基本操作的攔截和自定義，如屬性查找、賦值、枚舉、函數(shù)調(diào)用等2022-12-12
微信實現(xiàn)自動跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載
這篇文章主要介紹了微信實現(xiàn)自動跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript中的變量聲明早于賦值分析，需要的朋友可以參考下2012-03-03
這篇文章主要為大家詳細(xì)介紹了js微信分享接口調(diào)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了JavaScript中的常用算法與函數(shù)。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)2048小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
javascript中clipboardData對象用法詳解
這篇文章主要介紹了javascript中clipboardData對象用法,詳細(xì)分析了clipboardData對象的功能及相關(guān)使用技巧,需要的朋友可以參考下2015-05-05
JavaScript保存并運算頁面中數(shù)字類型變量的寫法
這篇文章主要介紹了JavaScript保存并運算頁面中數(shù)字類型變量的寫法,當(dāng)你在頁面中需要不停運算一個數(shù)字變量時非常有用,普通的寫法不能正常運算,使用本文方法就可以,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用實例詳解
這篇文章主要介紹了Bootstrap進(jìn)度條與AJAX后端數(shù)據(jù)傳遞結(jié)合使用,需要的朋友可以參考下2017-04-04