其它

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > 其它 > layer弹出层自定义样式

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

投稿: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弹出层自定义样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文