layer更改皮膚的實(shí)現(xiàn)方法

更新時間：2019年09月11日 10:24:03 作者：yytoo2

今天小編就為大家分享一篇layer更改皮膚的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

layUI的彈出層模塊layer在使用時有一個skin屬性

skin不僅允許你傳入layer內(nèi)置的樣式class名，還可以傳入您自定義的class名。

如果要改變彈出層的title樣式或者背景之類的就可以使用該屬性。

使用方法如下：

在layer.open中使用skin:

layer.open({
 type: 1,
 title: '變化詳情',
 shadeClose: true,
 shade: 0.8,
 skin: 'layer_bg',  //layer_bg是自定義的css樣式
 area: ['1000px', '600px'],
 content: html, //html是之前寫好的彈出層html代碼的字符串
});

在css中完成skin中用到的css樣式：

body .layer_bg .layui-layer-content{
  background-color: #eaf3fd;
}

上面的css樣式中格式是固定的：

'body'+空格+自定義的class名+需要修改的彈出層部分的class

彈出層的代碼如下：

<div class="layui-layer layer-anim layui-layer-page layer_bg" id="layui-layer1" type="page" times="1" showtime="0" contype="string" style="z-index: 19891015; width: 1000px; height: 600px; top: 145px; left: 81.5px;">
<div class="layui-layer-title" style="cursor: move;" move="ok">這里是title</div>
<div id="" class="layui-layer-content" style="height: 557px;">

這里是彈出框主題內(nèi)容

</div>
<span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;" rel="external nofollow" ></a></span>
</div>

根據(jù)上面的代碼，如果要修改title部分的樣式，就設(shè)置：'body'+空格+自定義的class名+'layui-layer-title'的css樣式，如果要設(shè)置主體窗口的樣式就設(shè)置：'body'+空格+自定義的class名+'layui-layer-content'。

以上這篇layer更改皮膚的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

childNodes 用法兩例
childNodes實(shí)現(xiàn)代碼
2009-04-04
javascript實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要介紹了javascript實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，以一個完整的實(shí)例對javascript實(shí)現(xiàn)表單驗(yàn)證的方法進(jìn)行分析，感興趣的小伙伴們可以參考一下
2016-01-01
javascript中typeof操作符和constucor屬性檢測
這篇文章主要介紹了javascript中typeof操作符和constucor屬性檢測的相關(guān)資料,需要的朋友可以參考下
2015-02-02
innerText和textContent對比及使用介紹
innerText使用過程中遇到了FireFox的兼容問題FireFox不支持innerText方法但是有個類似的方法，叫textContent，類似innerText，都是用來獲?。ㄔO(shè)置）元素中text的方法,感興趣的朋友可以參考下
2013-02-02
url地址自動加#號問題說明
# 包含了一個位置信息，默認(rèn)的錨點(diǎn)是＃top 也就是網(wǎng)頁的上端，而javascript:void(0) 僅表示一個死鏈接。
2010-08-08
javascript拖拽應(yīng)用實(shí)例（二）
這篇文章主要為大家詳細(xì)介紹了javascript拖拽應(yīng)用實(shí)例，拖拽條拖到底，驗(yàn)證碼顯示出來，感興趣的小伙伴們可以參考一下
2016-03-03
js 幻燈片的實(shí)現(xiàn)
今天在群里看到有人要幻燈片的代碼，于是我自己也想了想，做個總結(jié)。常見的幻燈片切換無非就是輪播和漸變，不管哪種都是用定時器來逐步改變圖片或者圖片組的某種屬性來實(shí)現(xiàn)的
2011-12-12
javascript中的delete使用詳解
在這篇文章中作者從《JavaScript面向?qū)ο缶幊讨改稀芬粫嘘P(guān)于 delete 的錯誤講起，詳細(xì)講述了關(guān)于 delete 操作的實(shí)現(xiàn)，局限以及在不同瀏覽器和插件（這里指 firebug）中的表現(xiàn)
2013-04-04
關(guān)于恒等于（===）和非恒等于（!==）
關(guān)于恒等于（===）和非恒等于（!==）...
2007-08-08
js中最容易被忽視的事件問題大總結(jié)
下面小編就為大家?guī)硪黄猨s中最容易被忽視的事件問題大總結(jié)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-05-05