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

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

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

layUI的彈出層模塊layer在使用時(shí)有一個(gè)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)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ES6中的數(shù)組擴(kuò)展方法
這篇文章主要介紹了ES6中的數(shù)組擴(kuò)展方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
jquery操作ul的一些操作筆記整理(干貨)
下面小編就為大家?guī)硪黄猨query操作ul的一些操作筆記整理(干貨)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
微信小程序--onShareAppMessage分享參數(shù)用處(頁(yè)面分享)
本篇文章主要介紹了微信小程序的頁(yè)面分享onShareAppMessage分享參數(shù)用處的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-04-04
JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)判斷圖片是否加載完成的方法,結(jié)合實(shí)例形式分析了javascript常見的圖片加載完成判斷方法與相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
knockoutjs動(dòng)態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實(shí)現(xiàn)方法
Knockoutjs 的Components 是一種自定義的組件，它以一種強(qiáng)大、簡(jiǎn)介的方式將你自己的ui代碼組織成一種單獨(dú)的、可重用的模塊。接下來通過本文給大家介紹knockoutjs動(dòng)態(tài)加載外部的file作為component中的template數(shù)據(jù)源的實(shí)現(xiàn)方法，一起看看吧
2016-09-09
JavaScript獲取表單內(nèi)所有元素值的方法
這篇文章主要介紹了JavaScript獲取表單內(nèi)所有元素值的方法,實(shí)例分析了javascript操作表單元素的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
這篇文章主要給大家介紹了關(guān)于JSONPath使用指南和實(shí)用技巧的相關(guān)資料,JsonPath,類似于XPath在XML中的作用,其提供了對(duì)格式Json數(shù)據(jù)的解析能力,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08