layUI的彈出層模塊layer在使用時有一個skin屬性
skin不僅允許你傳入layer內置的樣式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;">
這里是彈出框主題內容
</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>
根據上面的代碼,如果要修改title部分的樣式,就設置:'body'+空格+自定義的class名+'layui-layer-title'的css樣式,如果要設置主體窗口的樣式就設置:'body'+空格+自定義的class名+'layui-layer-content'。
以上這篇layer更改皮膚的實現(xiàn)方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答