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 简练的几个函数
Aug 29 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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/08/05 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
js实现简单模态框实例
2018/11/16 Javascript
js实现随机数小游戏
2019/06/28 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python中文编码问题小结
2014/09/28 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python retrying模块的使用方法详解
2019/09/25 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
食品工程专业求职信
2014/06/15 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
开场白怎么写
2015/06/01 职场文书
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL