Layui弹出层怎么实现加载完成前显示Loading遮罩效果-Layui教程-PHP中文网

必须在 layui.open 的 success 回调中动态插入 loading，因 DOM 此时已挂载；禁用 layer.load() 叠加，避免遮罩错位、关闭不同步及移动端兼容问题；异步加载需手动发请求并确保 .always() 清理 loading；移动端需设 pointer-events: none 并保证父容器 position: relative。

layui.open 里怎么加 loading 遮罩

直接在 layui.open 的 content 里塞 loading 不行，因为弹出层还没渲染完，dom 还没挂载，document.getelementbyid 找不到目标节点。得靠 success 回调——它在弹窗 dom 插入页面后、动画开始前触发，是唯一能安全操作内容区域的时机。

常见错误是把 loading 放在 content 字符串里硬写死，结果弹出层一闪而过，loading 根本没显示；或者用 setTimeout 延迟操作，但时间不好控，快网下可能还没加载就隐藏了。

用 success 回调获取弹窗 body 节点：$(this).find('.layui-layer-content') 或原生 this.querySelector('.layui-layer-content')
在回调里动态插入 loading HTML，比如 <div class="layui-layer-loading"></div>（Layui 自带样式）
加载完成后再用 layer.closeLoading() 或手动移除 loading 元素

为什么不能用 layer.load() 叠在 open 上面

layer.load() 是独立浮层，z-index 默认比 layer.open() 低，而且它不绑定到目标弹窗上。两个浮层叠加时，常出现遮罩错位、关闭不同步、点击穿透等问题——尤其当 open 弹窗带 shadeClose: true，点遮罩会关掉 load 却关不掉 open，留下空白弹窗。

更麻烦的是兼容性：Layui 2.8+ 对 layer.load() 的 z-index 做了调整，老项目升级后容易突然失效；移动端 Safari 下还可能出现遮罩层不响应 touch 事件。

不要并行调 layer.load() 和 layer.open()
如果必须复用 loading 效果，优先改用 layer.msg('加载中...', {icon: 16, time: 0}) 并手动控制关闭，但注意它不遮罩
真正需要遮罩时，只在 open 内部做 DOM 层级控制

异步加载 content 后怎么替换 loading

当 content 是 URL（比如 content: ['xxx.html', 'get']），Layui 会自动发起请求，但不会等返回再显示弹窗——它先渲染空弹窗，再填内容。这时候 success 回调拿到的是空容器，loading 必须放进去，等 AJAX 完成再删。

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

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

下载

关键点在于：Layui 没暴露内部请求状态，不能监听“加载完成”，只能自己接管请求。否则会出现 loading 消失太早（内容还没渲染）或卡死（忘了清除）。

把 content 改成函数形式：content: function() { return '<div class="loading">...</div>'; }
在 success 回调里手动发 AJAX，用 $.get() 或 fetch，成功后用 $(layero).find('.layui-layer-content').html(data) 替换
务必在 AJAX .always() 或 finally 里清理 loading，避免异常时残留

移动端点击遮罩不关闭弹窗？检查 z-index 和 pointer-events

有些机型（特别是 iOS 微信内置浏览器）下，loading 遮罩盖住整个弹窗内容区后，点外面的半透明 shade 区域没反应。这不是 Layui bug，而是因为 loading 元素用了 position: absolute 且未设 pointer-events: none，挡住了底层 shade 的点击穿透。

另一个坑是自定义 loading 用了 height: 100% 但父容器没设 position: relative，导致遮罩高度塌陷，实际没盖住全屏。