layer

layer 扩展皮肤

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

layer 首页 文档手册

自定义皮肤说明code

  1. layer 提供了强健的皮肤扩展属性,这意味着如果你对 layer 默认的样式不太满意,你还有更多的选择。
  2. 一:命名文件夹
  3. 在 layer 的 skin 目录建立一个文件夹,假设您将该文件夹命名为:yourskin
  4. 二:创建样式依赖文件
  5. 在 yourskin 文件夹下建立一个单独的样式文件,务必命名为:style.css。并且你可能用到的图片也要存放在该文件夹下
  6. 三:书写样式
  7. /*
  8. 通过 body 前缀,是为了确保你皮肤的优先级
  9. 你可以通过调试工具重置更多样式
  10. */
  11. body .layer-ext-yourskin .layui-layer-title{}
  12. body .layui-ext-yourskin .layui-layer-btn{}
  13. body .layui-ext-yourskin .layui-layer-btn a{}
  14. 四:调试
  15. 通过全局配置看看你的皮肤定义的如何:
  16. layer.config({
  17. extend: 'myskin/style.css', //加载您的扩展样式
  18. skin: 'layer-ext-yourskin'
  19. });
  20. layer.alert('layer 新皮肤');
  21. 五:应用
  22. 现在你已经成功制作了一个皮肤了,如果你觉得它很美,你可以放入项目中去使用。
  23. 1. 全局配置
  24. 见第四步
  25. 2. 局部使用
  26. layer.config({
  27. extend: 'myskin/style.css' //同样需要先加载新皮肤
  28. });
  29. //单个使用
  30. layer.open({
  31. skin: 'layer-ext-myskin' //只对该层采用 myskin皮肤
  32. });
  33. //也就是说,无论你全局还是局部,都要通过 layer.config 的 extend 来加载样式。