layui中的layer弹出层自定义样式更改背景

更新时间：2023年06月17日 10:18:49 投稿：yin

layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。

layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。如果想要更换想要的样式，可以选择自定义skin属性。

javascript中自定义skin示例

比如layer.open中使用skin，javascript中调用：

layer.open({
type: 1,
title: '变化详情',
shadeClose: true,
shade: 0.8,
skin: 'layer_bg', //layer_bg是自定义的css样式
area: ['1000px', '600px'],
content: html, //html是之前写好的弹出层html代码的字符串
});

skin: 'layer_bg', //layer_bg是自定义的css样式

css样式示例

格式是固定的：'body'+自定义的class名+需要修改的弹出层部分的class名。

layer弹窗头部样式

body .layer_bg .layui-layer-title{
    background: #ff0000;
    color:#fff;
}

layer弹窗内容样式

body .layer_bg .layui-layer-content{
    background-color: #eaf3fd;
}

layer弹窗关闭按钮样式

body .layer_bg .layui-layer-setwin{
    color:#fff;
}

到此这篇关于layui中的layer弹出层自定义样式更改背景的文章就介绍到这了,更多相关layer弹出层自定义样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layer

使用JS 的download库在浏览器直接下载文件
一般情况下web项目的浏览器下载文件，都是使用form表单或者ajax向后端提交数据，发送请求，后端文件的URL地址或者二进制文件流。这篇文章主要介绍了使用JS 的download库在浏览器直接下载文件。
2022-12-12
requireJS使用指南
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 
2016-04-04
使用three.js 画渐变的直线
这篇文章主要介绍了使用three.js 画渐变的直线的相关资料以及具体的实例代码，有需要的小伙伴可以参考下
2016-06-06
typescript类型体操及关键字使用示例详解
这篇文章主要为大家介绍了typescript类型体操及关键字使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
Typescript使用装饰器实现接口字段映射与Mock实例
这篇文章主要为大家介绍了Typescript使用装饰器实现接口字段映射与Mock实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
TypeScript 基本数据类型实例详解
这篇文章主要为大家介绍了TypeScript 基本数据类型实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
TypeScript前端上传文件到MinIO示例详解
这篇文章主要为大家介绍了TypeScript前端上传文件到MinIO示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
TypeScript学习轻松玩转类型操作
这篇文章主要为大家介绍了TypeScript学习轻松玩转类型操作，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
浅谈Sizzle的“编译原理”
正在学习Sizzle源码或有一定前端基础的同学们，可以一边看源码一边看这些文章进行验证，所以虽然我会分析源码中的正则表达式,有大量的注释，但不会讲正则表达式的基本用法！
2015-04-04
前端构建 Less入门(CSS预处理器)
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
2017-03-03