layer.load 的 content 参数无法直接显示清晰文字，因图标与文字共用容器且定位重叠；需通过 success 回调用 padding-top 下移文字或 after() 插入独立 DOM 实现物理分离，并严格使用 shade: [透明度, 颜色] 数组格式。
layer.load 默认只显示图标，传 content 字符串看似能加文字，但实际会和 loading 图标挤在同一个容器里——文字压图标上，根本看不清。真正可用的自定义文字，必须靠 success 回调手动调整 dom 结构或样式。
为什么直接写 content: '正在提交' 不行
因为 layui 把文字和图标都塞进 .layui-layer-content 这个 div 里，且图标（.layui-layer-loading1）是绝对定位或 inline-block，文字默认对齐基线，结果就是叠在一起。你改 color 或 font-size 没用，位置没变。
-
content参数只是触发文字渲染的开关，不是“插入独立文案”的入口 - 全局 CSS 覆盖无效：每次新建 load 层 class 名动态生成，且图标/文字共用父容器
- 不配
success，等于没解构，文字永远糊在图标正中间
用 padding-top 下移文字最稳
这是兼容性最好的方案：不碰图标 DOM，只撑开文字容器内部空间，让文字自然下移，避开所有 icon 类型（1/2/3）的定位差异。
-
padding-top值需按 icon 类型试调：icon=1（小圆圈）用 40–45px；icon=2（大圆圈）用 50–60px；icon=3（齿轮）可能要 70px+ - 必须设
width，否则长文字换行，破坏居中效果 - 浅色遮罩（如
[0.1, '#fff']）下，color必须同步改深色，否则白底白字
layer.load(2, {
shade: [0.2, '#000'],
content: '请稍候',
success: function(layero) {
layero.find('.layui-layer-content').css({
'padding-top': '50px',
'width': '180px',
'color': '#fff',
'text-align': 'center'
});
}
});
想让文字严格在图标下方？得追加新 DOM
如果 UI 要求图标居中、文字单独一行在正下方（带间距、可独立控制字体），就不能只靠 padding-top。得用 after() 插入一个干净的 div，彻底隔离样式。
- 原
.layui-layer-content只留图标，新div专放文字，互不影响 - 新元素可自由设
margin-top控制图标与文字间距，比padding-top更直观 - 注意：新 DOM 插入后，
.layui-layer-content宽高可能变化，必要时需重设其text-align: center
layer.load(2, {
shade: [0.3, '#000'],
success: function(layero) {
layero.find('.layui-layer-content').after(
'<div class="layer-load-text" style="color:#fff; text-align:center; margin-top:15px; font-size:14px;">加载中...</div>'
);
}
});
shade 必须是数组格式才生效
很多人写 shade: 0.3 或 shade: '#000'，结果遮罩不显示、文字颜色失效——layer.load 的 shade 只认数组：[透明度, 颜色]。
- 错误写法：
shade: 0.2、shade: '#000'、shade: true - 正确写法：
shade: [0.2, '#000']、shade: [0.1, '#fff'] - 这个限制直接影响文字可见性：遮罩不生效 → 背景内容干扰 → 文字难读
真正麻烦的不是加文字，而是怎么让它和图标“物理分离”。padding-top 是 quick fix，after() 是 clean fix——选哪个，取决于你的 UI 规范是否允许文字和图标共享容器。别跳过 shade 数组格式，这是很多自定义失败的第一道坎。
