使用layer.msg提示过程中,想修改背景颜色及字体,并设置半透明状态
关于msg默认配置,源码如下:
msg: function(content, options, end){ //最常用提示层
var type = typeof options === 'function', rskin = ready.config.skin;
var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg';
var anim = doms.anim.length - 1;
if(type) end = options;
return layer.open($.extend({
content: content,
time: 3000,
shade: false,
skin: skin,
title: false,
closeBtn: false,
btn: false,
resize: false,
end: end
}, (type && !ready.config.skin) ? {
skin: skin + ' layui-layer-hui',
anim: anim
} : function(){
options = options || {};
if(options.icon === -1 || options.icon === undefined && !ready.config.skin){
options.skin = skin + ' ' + (options.skin||'layui-layer-hui');
}
return options;
}()));
},
.layui-layer-msg{min-width:180px;border:1px solid #D3D4D3;box-shadow:none}.layui-layer-hui{min-width:100px;background-color:#000;filter:alpha(opacity=60);background-color:rgba(0,0,0,.6);color:#fff;border:none}.layui-layer-hui .layui-layer-content{padding:12px 25px;text-align:center}
默认显示3s,若未配置skin,默认layui-layer-hui。
解决办法
1. 设置文件夹名XXskin,存放于css/modules/layer/skin下,css文件一定命名为style.css
2. 配置skin
-
全局使用配置
layer.config({ extend: 'xxskin/style.css', //加载新皮肤 skin: 'layer-ext-myskin' //一旦设定,所有弹层风格都采用此主题。 });
-
局部使用配置
layer.config({ extend: 'myskin/style.css' //同样需要加载新皮肤 }); layer.open($.extend({ shade: false, skin: 'layer-ext-msgskin', anim: 6, time: 2000, ... }));
皮肤半透明配置
覆盖 layui-layer-hui
layer.open($.extend({
shade: false,
skin: 'layer-ext-msgskin layui-layer-bg',
anim: 6,
time: 2000,
...
}));
//style.css (红底白字半透明)
.layer-ext-msgskin{
}
.layui-layer-bg {
background-color: rgb(255,0,0);
filter: alpha(opacity:40);
background-color: rgba(255,0,0,0.4);
color:#fff;
}
.layui-layer-bg .layui-layer-content {
color: azure;
font-size: 12px;
text-align: center;
line-height: 35px;
}