layer弹出层扩展主题的方法

 更新时间:2019年09月11日 10:40:33   作者:木子金丰  
今天小编就为大家分享一篇layer弹出层扩展主题的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

弹出层插件layer确实很强大,官方提供主题太少,但是提供扩展的方式,由于项目使用统一颜色风格,就想扩展一下。官方默认的三种:

1.白蓝(默认)

layer.alert('内容');//默认

2.墨绿

layer.alert('内容', {
 icon: 1,
 skin: 'layui-layer-molv'
})

3.深蓝

layer.alert('内容', {
 icon: 1,
 skin: 'layui-layer-lan'
})

==========重点啦===================================

下面以扩展橙色为例:

从官方下载的库目录结构应该是:

1.在文件夹theme下新建目录orange,这个目录可以放css文件,用到的图片等(可以直接复制default目录的文件)

2.文件layer.css名字不要修改,清空文件里的内容,扩展自己的内容(这些css也不是我随意写的,可以参数文件夹default里的layer.css 搜索layui-layer-molv,参考它的写,打开浏览器debug模式,查看引用哪个css样式,我们都可以自己扩展修改它),layui-layer-orange 这个名字当然可以随意起。

body .layui-layer-orange .layui-layer-title{background:#ff9000; color:#FFFFFF; border: none;}
body .layui-layer-orange .layui-layer-btn a{background:#ff9000;color:#FFFFFF;}
body .layui-layer-orange .layui-layer-btn .layui-layer-btn1{background:#ff9000;}
body .layui-layer-orange .layui-layer-btn .layui-layer-btn0{border: none;}

3.页面中使用扩展后的样式

layer.config({
 extend: 'orange/layer.css', //加载您的扩展样式,它自动从theme目录下加载这个文件
 skin: 'layui-layer-orange' //layui-layer-orange这个就是上面我们定义css 的class
});

4.测试下哈哈

layer.alert('layer皮肤-Yourskin');

layer.confirm('您是如何看待前端开发?', {
 btn: ['重要','奇葩'] //按钮
}, function(){
 layer.msg('的确很重要', {icon: 1});
}, function(){
 layer.msg('也可以这样', {
 time: 20000, //20s后自动关闭
 btn: ['明白了', '知道了']
 });
});

效果:

以上这篇layer弹出层扩展主题的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JS获取当前时间的年月日时分秒及时间的格式化的方法

    JS获取当前时间的年月日时分秒及时间的格式化的方法

    这篇文章主要介绍了js获取当前时间的年月日时分秒及时间的格式化,本文通过实例代码讲解的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • javascript如何创建对象

    javascript如何创建对象

    这篇文章主要为大家详细介绍了javascript创建对象的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 老生常谈js中的MVC

    老生常谈js中的MVC

    下面小编就为大家带来一篇老生常谈js中的MVC。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 深入理解JavaScript中的预解析

    深入理解JavaScript中的预解析

    JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。下面这篇文章就给大家详细介绍了JavaScript中的预解析,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • javascript之函数进阶详解

    javascript之函数进阶详解

    这篇文章主要为大家介绍了javascript函数进阶,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-12-12
  • setTimeout 不断吐食CPU的问题分析

    setTimeout 不断吐食CPU的问题分析

    有时候我们在使用setTimeout的时候会导致IE特别占用cpu,有可能会导致死机等情况。
    2009-04-04
  • 微信小程序学习总结(四)事件与冒泡实例分析

    微信小程序学习总结(四)事件与冒泡实例分析

    这篇文章主要介绍了微信小程序学习总结(四)事件与冒泡,结合实例形式分析了微信小程序事件、冒泡、数据获取相关机制、原理与操作注意事项,需要的朋友可以参考下
    2020-06-06
  • Bootstrap下拉菜单效果实例代码分享

    Bootstrap下拉菜单效果实例代码分享

    这篇文章主要为大家详细介绍了Bootstrap下拉菜单效果实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • javascript网页随机点名实现过程解析

    javascript网页随机点名实现过程解析

    这篇文章主要介绍了javascript实现网页随机变色及实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • js multiple全选与取消全选实现代码

    js multiple全选与取消全选实现代码

    本文章总结了利用jquery与js实现multiple全选与取消全选代码有需要参考的朋友可参考下
    2012-12-12

最新评论