Layui弹出层layer.load如何自定义加载文字-Layui教程-PHP中文网

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框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

原 .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>'
    );
  }
});