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 相关文章推荐
JavaScript中Array 对象相关的几个方法
Dec 22 Javascript
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
小程序实现按下录音松开识别语音
Nov 22 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
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
python实现拓扑排序的基本教程
2018/03/11 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Django中create和save方法的不同
2019/08/13 Python
python 函数中的参数类型
2020/02/11 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
护士2014年终工作总结
2014/11/11 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书