应将「取消」按钮放左、「确定」按钮放右,需设置 btn: ['取消','确定']、btnAlign: 'r',并使 yes 回调处理取消逻辑、btn2 处理确定逻辑;或用 layer.open 自定义按钮并清空 btn 数组,显式调用 layer.close;也可用 CSS flex-direction: row-reverse 反向排列,但需注意作用域。

需要把「取消」按钮放在左边、「确定」按钮放在右边,但默认 layer.confirm 的按钮顺序是左「确定」右「取消」,直接改 btn 数组顺序会错乱回调映射,必须用正确方式调整。
用 btnAlign + 反向定义 btn 数组
这一步操作起来很简单,直接把 btn 数组写成 ['取消','确定'],再加 btnAlign: 'r' 让按钮组右对齐——但别急着试,这样会导致点击「取消」触发 yes 回调,逻辑全反了。
第一步:在 layer.confirm 第二个参数对象中设置 【btn: ['取消', '确定']】,顺序按视觉需求来;
第二步:添加 【btnAlign: 'r'】,强制按钮容器右对齐,此时两个按钮会紧贴右侧,「取消」在左、「确定」在右;
第三步:回调函数必须严格对应新顺序——第一个函数(yes)处理「取消」逻辑,第二个函数(btn2)处理「确定」逻辑。漏掉任一回调或写反,点按钮就无响应。
彻底接管按钮 HTML(推荐)
当 btnAlign 无法满足精准控制,比如要加图标、改颜色、设间距,或者项目已存在多处自定义按钮逻辑,建议直接替换整个按钮区域。
方法一:用 layer.open 替代 layer.confirm,手动写按钮结构
调用 layer.open,content 里写完整 HTML 按钮,【btn: [] 必须为空数组】,否则默认按钮栏和自定义按钮会同时出现;
方法二:按钮 onclick 中必须显式调用 layer.close(layer.index),否则点击后弹窗不关闭——这是最容易被忽略的致命点,不写就卡死;
方法三:确认按钮加 style="background:#52c418;color:#fff;",取消按钮加 style="background:#f5f5f5;color:#666;",样式直接内联,避免 CSS 冲突。
禁用默认按钮后用 CSS 控制顺序
如果坚持用 layer.confirm 但想微调位置,可以保留 btn 配置,再用 CSS 反向排列按钮容器。
在页面全局样式中加入:
.layui-layer-btn { display: flex; flex-direction: row-reverse; }
这行代码会让按钮顺序翻转,但注意:它会影响所有 layer 弹层的按钮,包括 layer.msg、layer.alert;
若只针对某一次 confirm,需加唯一 class 并限定作用域,例如在 open 前执行 document.body.classList.add('custom-layer-btn-reverse'),close 后移除——否则污染其他模块。


















