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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
js实现简单商品筛选功能
Feb 02 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
信用卡效验程序
2006/10/09 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
渡河少年教学反思
2014/02/12 职场文书
募捐倡议书
2014/04/14 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
单位在职证明书
2014/09/11 职场文书
维稳承诺书
2015/01/20 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
教学工作总结范文5篇
2019/08/19 职场文书