layer更改皮肤的实现方法


Posted in Javascript onSeptember 11, 2019

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

Javascript 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
批量修改标签css样式以input标签为例
Jul 31 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 Javascript
node 解析图片二维码的内容代码实例
Sep 11 #Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 #Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 #Javascript
JS中封装axios来管控api的2种方式
Sep 11 #Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 #Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 #Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
You might like
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python模块之StringIO使用示例
2015/04/08 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python使用selenium实现批量文件下载
2019/03/11 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
python实现手势识别的示例(入门)
2020/04/15 Python
Python xlwt模块使用代码实例
2020/06/10 Python
简述python Scrapy框架
2020/08/17 Python
python Xpath语法的使用
2020/11/26 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
老师推荐信
2013/10/28 职场文书
汇源肾宝广告词
2014/03/20 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
公司回复函格式
2015/07/14 职场文书
干部培训简讯
2015/07/20 职场文书
教你用python实现12306余票查询
2021/06/30 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python