脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → layer更改皮肤

layer更改皮肤的实现方法

 更新时间：2019年09月11日 10:24:03   作者：yytoo2  
今天小编就为大家分享一篇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更改皮肤的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • childNodes 用法两例

    childNodes 用法两例

    childNodes实现代码
    2009-04-04
  • javascript实现表单验证

    javascript实现表单验证

    这篇文章主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • javascript中typeof操作符和constucor属性检测

    javascript中typeof操作符和constucor属性检测

    这篇文章主要介绍了javascript中typeof操作符和constucor属性检测的相关资料,需要的朋友可以参考下
    2015-02-02
  • innerText和textContent对比及使用介绍

    innerText和textContent对比及使用介绍

    innerText使用过程中遇到了FireFox的兼容问题FireFox不支持innerText方法但是有个类似的方法，叫textContent，类似innerText，都是用来获取（设置）元素中text的方法,感兴趣的朋友可以参考下
    2013-02-02
  • url地址自动加#号问题说明

    url地址自动加#号问题说明

    # 包含了一个位置信息，默认的锚点是＃top 也就是网页的上端，而javascript:void(0) 仅表示一个死链接。
    2010-08-08
  • javascript拖拽应用实例（二）

    javascript拖拽应用实例（二）

    这篇文章主要为大家详细介绍了javascript拖拽应用实例，拖拽条拖到底，验证码显示出来，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js 幻灯片的实现

    js 幻灯片的实现

    今天在群里看到有人要幻灯片的代码，于是我自己也想了想，做个总结。常见的幻灯片切换无非就是轮播和渐变，不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的
    2011-12-12
  • javascript中的delete使用详解

    javascript中的delete使用详解

    在这篇文章中作者从《JavaScript面向对象编程指南》一书中关于 delete 的错误讲起，详细讲述了关于 delete 操作的实现， 局限以及在不同浏览器和插件（这里指 firebug）中的表现
    2013-04-04
  • 关于恒等于（===）和非恒等于（!==）

    关于恒等于（===）和非恒等于（!==）

    关于恒等于（===）和非恒等于（!==）...
    2007-08-08
  • js中最容易被忽视的事件问题大总结

    js中最容易被忽视的事件问题大总结

    下面小编就为大家带来一篇js中最容易被忽视的事件问题大总结。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-05-05

最新评论