layui layer.msg皮肤扩展

最新推荐文章于 2024-04-11 16:59:23 发布

银河系银桑

最新推荐文章于 2024-04-11 16:59:23 发布

阅读量1.3k

点赞数

分类专栏： Layui 文章标签： javascript 前端 css layui

本文链接：https://blog.csdn.net/weixin_40293364/article/details/125366256

版权

Layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用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;
}