点击确定后不关闭弹窗并显示loading,需在yes回调开头调用layer.load(1)获取loading索引,异步完成后根据业务结果决定是否layer.close(loadingindex)和弹窗,并禁用按钮防重复提交。

layer.open 点击确定后不关闭弹窗并显示 Loading
直接改 yes 回调函数的行为即可。默认情况下,yes 回调里没手动调用 layer.close 就不会关,但很多人误以为点了“确定”就自动关闭——其实只是 layer 默认按钮配置里绑了 layer.close(index),你一覆盖回调就失去这个逻辑,得自己补。
常见错误是:写了 yes 回调但没禁用默认关闭,结果 loading 没显示几毫秒弹窗就闪退;或者忘了在异步结束后手动关闭,导致 loading 一直转。
- 在
yes回调开头立即调用layer.load(1)(或layer.load(2)),返回 loading 的 index - 用该 index 在请求完成/失败后调用
layer.close(loadingIndex) - 别在
yes里直接写同步耗时操作——用户会感觉卡顿,loading 反而像没生效 - 如果用了表单提交,记得
event.preventDefault(),否则页面刷新导致 layer 实例丢失
如何避免 layer.load 和 layer.close 顺序错乱
layer.load 是异步插入 DOM 的,虽然快,但和后续 JS 执行不是原子操作。尤其在快速连续点击“确定”时,容易出现多个 loading 层叠、或 close 掉了错误的 index。
典型现象:layer.close is not a function 或 loading 消失但弹窗还挂着。
- 把 loading index 存到闭包变量或
data-属性里,确保 yes 回调内引用的是本次触发的 loading - 调用
layer.load后立刻禁用确定按钮(比如加disabled或设btn[0] = '提交中...'),防止重复提交 - 不要复用全局变量存 loading index;每个弹窗实例应管理自己的 loading 状态
- 如果请求超时,也要有兜底的
layer.close,否则用户以为卡死了
使用 AJAX 提交时,layer.close 应该在哪一步调用
不是在 success 里调用就万事大吉。AJAX 的 success 只代表 HTTP 状态码 OK,不代表业务成功。后端可能返回 {code: 400, msg: '库存不足'},这时你不该关弹窗,而该提示错误并保留输入态。
容易踩的坑:把 layer.close 写死在 success 或 then 分支里,导致业务报错时弹窗消失,用户看不到提示。
- 统一在响应解析后判断
res.code === 0(或你约定的成功标识)再 close - 错误分支里用
layer.msg(res.msg),不关弹窗 - 无论成功失败,都要先
layer.close(loadingIndex),再决定是否关弹窗 - 如果要跳转页面(如提交后
location.href = '/done'),close 弹窗要在跳转前,否则部分浏览器会中断跳转
layer.open 配置项中哪些会影响 Loading 行为
和 loading 显示最相关的是 skin 和 anim,但真正影响体验的是 shadeClose 和 cancel——它们控制用户能否中途关掉弹窗,而你在 show loading 时通常不希望用户乱点。
另一个隐性影响项是 maxmin,开启后用户可缩放弹窗,可能导致 loading 图标被挤出视区。
-
shadeClose: false—— 点遮罩层不关闭,避免 loading 中误触退出 -
cancel: function() { return false; }—— 禁用右上角 ×,或改成提示“正在提交中,请稍候” -
anim: -1—— 关闭弹窗动画,让 loading 出现更干脆(尤其配合layer.load(2)时) - 避免设置
area: ['auto', 'auto'],宽高不定会导致 loading 图标定位偏移











