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

layui中的layer弹出层自定义样式更改背景
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。
2023-06-06
前端轻量级MVC框架CanJS详解
你可能听说了这个新MVC框架： CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢？当看完这篇教程，你将全面了解用它的什么工具来创建你自己的Web App。
2014-09-09
js库Modernizr的介绍和使用
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单
2015-05-05
rollup cli开发全面系统性rollup源码分析
这篇文章主要为大家介绍了rollup cli开发全网系统性rollup源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
移动设备web开发首选框架：zeptojs介绍
这篇文章主要介绍了移动设备web开发首选框架：zeptojs介绍,他兼容jquery的API,所以学起来或用起来并不吃力,需要的朋友可以参考下
2015-01-01
FastAdmin表单验证data-rule插件—Nice-validator的使用方法
FastAdmin的表单验证data-rule非常方便,也很炫酷,采用的Nice-validator是一款非常强大的表单验证插件,通过简单在元素上配置规则,即可达到验证的效果,怎么使用Nice-validator插件呢
2023-09-09
requireJS使用指南
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 
2016-04-04
less简单入门(CSS 预处理语言)
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充
2017-03-03
TypeScript数组实现栈与对象实现栈的区别详解
这篇文章主要为大家介绍了TypeScript数组实现栈与对象实现栈的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
自动生成typescript类型声明工具实现详解
这篇文章主要为大家介绍了自动生成typescript类型声明工具实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04