layer更改皮肤的实现方法

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

赞 (0)

相关推荐

  • layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子

    layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法. 1.界面如下: 2.login.html的界面主要代码: <div class="layer_form"> <div class="form_item"> <label>手机号码:</label> <div c

  • layer弹出层自定义提交取消按钮的例子

    首先从js开始 /** * 检查是否选中 */ Sendandre.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if (selected.length === 0) { Feng.info("请先选中表格中的某一记录!"); return false; } else { Sendandre.seItem = selected[0]; console.log(

  • layer ui插件显示tips时,修改字体颜色的实现方法

    今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: <script src="/assets/js/layer/layer.js"></script> function showMessage(msg, domObj) { layer.tips(msg, domObj,{tips:3});//弹出框加回调函数 } s

  • 浅谈layer的Icon样式以及一些常用的layer窗口使用方法

    本文搜集的是本人在实际开发中所用到的layer窗口,未用到的layer按钮,请参考layer官网:http://layer.layui.com/ 一.layer的icon样式 以上样式测试代码: layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){ //do something alert("确认"); layer.close(index); }); 二.询问框 官方案例: //询问框 layer.confirm

  • layer.open回调获取弹出层参数的实现方法

    如下所示: layer.open({ type : 2, title : '重命名', maxmin : true, shadeClose : true, // 点击遮罩关闭层 area : [ '200px', '150px' ], content : getContext() + "/node/torenamenode?nodeName="+nodeName, btn: ['确定'], yes: function(index, layero){ //do something/ /c

  • 在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法

    最近,在项目中使用到了layer.layer的弹层组件可以说是非常好用,layer 至今仍作为 layui 的代表作.在项目中,需要实现一个在表格里面点击操作,然后弹出layer层,将父层表格的行值传给子页面,子页面拿到值后,进行业务处理,从而实现真正的父子页面交互. 其实,官方文档都说的很清楚了. layui官方文档:http://layer.layui.com/ 使用版本:2.3.0 只是,需要我们耐心的读懂文档内容,然后根据自己的业务情况,实现自己想要的效果. 一.子页面获取父页面数据 子

  • 浅谈layer弹出层按钮颜色修改方法

    layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式 在open中 layer.open({ content: '确认提交?', btn: ["确认", "取消"], yes: function (index) { somefunciton... layer.close(index) }, btn2: function (index) { } }); layer中确认按钮在第一个位置,展示也是按顺序展示 如果和自己项目

  • layer更改皮肤的实现方法

    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: [

  • 在Winform框架界面中改变并存储界面皮肤样式的方法

    在本篇介绍的Winform界面样式改变及存储操作中,是指基于DevExpress进行界面样式的变化.一般情况下,默认我们会为客户提供多种DevExpress的界面皮肤以供个人喜好选择,默认DevExpress提供40余种皮肤样式,用户可以根据自己的喜好,选择较为美观.得体的皮肤,为了方便,我们对用户的皮肤选择进行记录,并可以动态改变. 1.界面皮肤的选择 Winform开发框架(包括混合式Winform开发框架)皮肤如下界面所示. 在皮肤集合中打开,可以看到很多界面皮肤可供选择 上面初始化的皮肤

  • JavaScritp添加url参数并将参数加入到url中及更改url参数的方法

    javascritp添加url参数方法,将参数加入到url中,如果原来url中有则覆盖,下面通过代码实例给大家讲解,具体内容请看下文. js代码如下所示: function addToUrl(obj){ var aprotocol = location.protocol; var ahost = location.host; var apath = location.pathname; var asearch = location.search; var ahash = location.has

  • JavaScript每天定时更换皮肤样式的方法

    本文实例讲述了JavaScript每天定时更换皮肤样式的方法.分享给大家供大家参考.具体分析如下: 这段js代码通过每天在不同时段自动更换网页调用的样式表,实现更换皮肤的功能. <script type="text/JavaScript"> <!-- function getStylesheet() { var currentTime = new Date().getHours(); if (0 <= currentTime&&currentTi

  • ubuntu mysql更改tmp路径的方法

    ubuntu系统是一个linux操作系统;下面我们小编给大家介绍ubuntu mysql更改tmp路径的方法. 因为mysql经常要把文件定入tmp目录,而tmp的目录为/tmp,为了提高性能,所以考虑更改tmpdir目录为/run/shm,即使用内存来存储. 1.打开/etc/mysql/my.cnf 更改tmpdir = /tmp为 tmpdir = /run/shm 2.更改/etc/apparmor.d/usr.sbin.mysqld添加: /run/shm/* rw, 3.重启mysq

  • Python批量更改文件名的实现方法

    Python批量更改文件名的实现方法 前言: 由于后台数据有好多,但是文案提供过来的图片命名全部没有按照格式来命名,Python这么强大的语言,肯定是能够处理这个问题的,于是我就写了一个小脚本批量改文件名. 版本相关 操作系统:Mac OS X EI Caption Python版本:2.7 IDE:Sublime 思路 我的思路是这样的,在当前文件下创建一个新的目录newfile,然后把所有的文件拷贝过去重命名一下就行了 素材 文案提供过来的图片全部都是1.jpg,2.jpg--这样顺序递增的

  • C# 向Word中设置/更改文本方向的方法(两种)

    一般情况下在Word中输入的文字都是横向的,今天给大家分享两种方法来设置/更改一个section内的所有文本的方向及部分文本的方向,有兴趣的朋友可以试下. 首先,从https://visualstudiogallery.msdn.microsoft.com/d3a38f74-3490-42da-bdb0-37fa5acebc36下载免费版.NET Word类库并安装,然后创建一个C# 控制台应用程序,添加引用及命名空间并参考以下步骤. 步骤1:创建一个新的Document对象并加载Word文档.

  • PHP实现更改hosts文件的方法示例

    本文实例讲述了PHP实现更改hosts文件的方法.分享给大家供大家参考,具体如下: 有这样一个需求,我有多个网址希望在不同的时候对应不同的 ip,如果一个个配 hosts,这工作显得有些繁琐.写了如下脚本来批量更改. <?php define('HOST_FILE', 'C:\Windows\System32\drivers\etc\hosts'); $hm = new HostManage(HOST_FILE); $env = $argv[1]; if (empty($env)) { $hm-

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

  • Python在for循环中更改list值的方法【推荐】

    一.在for循环中直接更改列表中元素的值不会起作用: 如: l = list(range(10)[::2]) print (l) for n in l: n = 0 print (l) 运行结果: [0, 2, 4, 6, 8] [0, 2, 4, 6, 8] l中的元素并没有被修改 二.在for循环中更改list值的方法: 1.使用range l = list(range(10)[::2]) print (l) for i in range(len(l)): l[i] = 0 print (l

随机推荐