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中的end()使用方法
Jul 10 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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类的使用 实例代码讲解
2009/12/28 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Angular路由简单学习
2016/12/26 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
Python实现大文件排序的方法
2015/07/10 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Django 自动生成api接口文档教程
2019/11/19 Python
css3的transition属性详解
2014/12/15 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
辅导员评语
2014/05/04 职场文书
主题实践活动总结
2014/05/08 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python