layer.msg提示成功样式自定义
layui默认的消息提示方法layer.msg样式如下:
根据UI的要求需要优化成如下图:
查阅layui文档发现,layer方法可以自定义class!链接: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4.
增加css如下(绿色对勾图标为插入的图片,可以在官方图标库中下载https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4):
/*自定义layui-layer.msg成功提示框样式*/
body .success-class{
min-width: 150px;
min-height: 110px;
border: 1px solid #2EB773;
box-shadow: none;
background-color: #EDFAE9;
border-radius: 5px;
color: #2EB773;
}
body .success-class .layui-layer-padding {
padding: 0px;
text-align: center;
top: 8px;
padding-top: 60px;
}
body .success-class .layui-layer-content .layui-layer-ico {
background-image: url(../images/checkMgr/paysuccessimg.png);
background-repeat: no-repeat;
background-position: top;
background-size: 20%;
width: 150px;
left: 0px;
}
使用layer.msg时加上属性skin添加自定义的类
layer.msg('提交成功', {icon: 1,skin: 'success-class'});