layer更改皮肤的实现方法

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

今天小编就为大家分享一篇layer更改皮肤的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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更改皮肤的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

函数window.open实现关闭所有的子窗口
这篇文章主要介绍了函数window.open实现关闭所有的子窗口的相关资料，需要的朋友可以参考下。
2015-08-08
jfinal与bootstrap的登录跳转实战演习
这篇文章给大家分享jfinal与bootstrap之间的登录跳转，具体内容包含有点击登录弹出模态框、点击登录确认按钮后的validate、jfinal的validate、jfinal的session管理、ajax请求与返回信息处理、页面间智能跳转。感兴趣的朋友跟着小编一起看看吧
2015-09-09
JS基于贪心算法解决背包问题示例
这篇文章主要介绍了JS基于贪心算法解决背包问题,简单说明了贪心算法的概念、原理,并结合具体实例形式分析了JS使用贪心算法解决部分背包问题的具体操作技巧,需要的朋友可以参考下
2017-11-11
JS如何通过FileReader获取.txt文件内容
今天小编就为大家分享一篇JS如何通过FileReader获取.txt文件内容，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-12-12
如何在JavaScript中正确处理变量
这篇文章主要介绍了如何在JavaScript中正确处理变量，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-12-12
xml文档转换工具，附图表例子(hta)
xml文档转换程序的一个小应用，几行代码生成饼图。源代码打包提供。
2010-11-11
深入浅析ES6 Class 中的 super 关键字
本文给大家收藏整理了ES6 Class 中的 super 关键字，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-10-10
js实现网页换肤
这篇文章主要为大家详细介绍了js实现网页换肤功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
js实现数字滚动特效
这篇文章主要为大家详细介绍了js实现数字滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
Javascript的IE和Firefox兼容性汇编
Javascript的IE和Firefox兼容性汇编...
2006-07-07