layer.config()是唯一全局配置入口,须在layer加载完成且任何弹层打开前执行,仅影响后续新建弹层,支持skin、shade等参数,不支持content等局部参数,局部设置优先级高于全局。
layer.config() 是唯一全局配置入口
所有 layer 弹层的默认行为,只能通过 layer.config() 一次性设置,不能靠反复调用 layer.open() 或其它方法覆盖全局。它必须在 layer 加载完成之后、任何弹层打开之前执行,否则无效。
常见错误是把它写在 layer.open() 后面,或者放在 DOM 加载前(比如 script 标签在 head 里但没加 defer),结果配置完全不生效。
- 必须确保
layui.use('layer', function(){...})内部或layui.config({})完成后再调用layer.config() - 如果用了模块化加载(如 ES Module 或 layui v2.9+ 的按需引入),
layer.config()要在layer实例就绪后立即执行 - 配置项只影响后续新建的弹层,已打开的层不受影响
哪些参数支持全局配置
不是所有 layer.open() 的参数都能设为全局默认值。只有明确标注「全局可用」或文档中说明「可被 layer.config() 设置」的才有效,比如:
-
skin:可设为'layui-layer-molv'或自定义 class 名,影响所有层样式 -
shade:如[0.5, '#000'],统一遮罩透明度和颜色 -
offset:如'100px'或['20%', '50%'],控制默认出现位置 -
anim:设为-1可全局禁用入场动画 -
isOutAnim:设为false可全局禁用关闭动画 -
maxmin、resize、fixed等布尔型开关也支持
但以下参数不支持全局配置:content、title、type、area、btn、yes 回调等——它们必须每次调用时显式传入。
配置后仍被单次调用覆盖?这是正常行为
layer.config() 设的是「默认值」,不是「强制值」。只要你在 layer.open({}) 里显式写了某个参数,它就会优先生效,完全忽略全局配置。比如:
layer.config({ shade: [0.2, '#333'] });
layer.open({ shade: 0 }); // 这里会用 0,不是 [0.2, '#333']
这个设计其实是合理的:你总得保留单个弹层的定制自由。但容易误以为「全局配置失效了」,其实只是被局部值盖过去了。
- 检查你是否在单次调用中重复写了同名参数
- 想验证全局配置是否生效?临时删掉局部参数再试
- 特别注意
skin:如果局部写了skin: 'xxx',它会叠加到全局 skin 上,不是替换
避免 CSS 冲突和初始化时机问题
全局配置后样式没变?大概率是 CSS 权重或加载顺序导致的。layer 的内置样式(如 .layui-layer-title)有固定优先级,如果你用 skin 加了自定义 class,但没加 !important 或没提高选择器权重,很容易被覆盖。
另外,layer.config() 必须在 layui.use('layer', ...) 的回调内执行,否则 layer 对象可能还没挂载好:
layui.use('layer', function(){
var layer = layui.layer;
layer.config({
skin: 'my-layer-skin',
shade: [0.4, '#000'],
anim: -1
});
// ✅ 此时再调用 layer.open 才能生效
});
最常被忽略的一点:v2.8+ 版本中,layer.config() 不再支持 extend 字段(老教程里常提),扩展模块现在统一走 layui.extend(),别混用。











