layer

layer 扩展皮肤

如果 layer 默认提供的配色并不符合您的项目,您还可以自定义您所需要的弹出层风格

layer 首页 文档手册

      layer 提供了强健的皮肤扩展属性,这意味着如果你对 layer 默认的样式不太满意,你还有更多的选择。

      一:命名文件夹
      在 layer 的 skin 目录建立一个文件夹,假设您将该文件夹命名为:yourskin

      二:创建样式依赖文件
      在 yourskin 文件夹下建立一个单独的样式文件,务必命名为:style.css。并且你可能用到的图片也要存放在该文件夹下

      三:书写样式
      /*
      通过 body 前缀,是为了确保你皮肤的优先级
      你可以通过调试工具重置更多样式
      */
      body .layer-ext-yourskin .layui-layer-title{}
      body .layui-ext-yourskin .layui-layer-btn{}
      body .layui-ext-yourskin .layui-layer-btn a{}

      四:调试
      通过全局配置看看你的皮肤定义的如何:
      layer.config({
      extend: 'myskin/style.css', //加载您的扩展样式
      skin: 'layer-ext-yourskin'
      });
      layer.alert('layer 新皮肤');

      五:应用
      现在你已经成功制作了一个皮肤了,如果你觉得它很美,你可以放入项目中去使用。

      1. 全局配置
      见第四步

      2. 局部使用
      layer.config({
      extend: 'myskin/style.css' //同样需要先加载新皮肤
      });
      //单个使用
      layer.open({
      skin: 'layer-ext-myskin' //只对该层采用 myskin皮肤
      });

      //也就是说,无论你全局还是局部,都要通过 layer.config 的 extend 来加载样式。