layer如何彈出層擴展主題

這篇文章將為大家詳細(xì)講解有關(guān)layer如何彈出層擴展主題，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

目前成都創(chuàng)新互聯(lián)已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、西陵網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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

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

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

2.墨綠

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

3.深藍

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: ['明白了', '知道了']
 });
});

效果:

關(guān)于“l(fā)ayer如何彈出層擴展主題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文名稱：layer如何彈出層擴展主題
文章路徑：http://muchs.cn/article30/jcjjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、用戶體驗、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)