5 分钟搞懂 layui layer从 3 行代码弹层到多弹层协同实战【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui做项目第一年被要求弹个确认框我直接用了原生 alert被打回来三次才换成 layui layer。layer 是 layui 组件库内置的通用弹层组件覆盖 dialog、page、iframe、loading、tips 五种类型3 行代码弹一个确认框再配几个参数就能换皮、换动画、换弹出位置。3 行代码出第一个弹层别一上来就研究open的全部参数业务里 90% 的出个提示场景用layer.msg和layer.confirm两个快捷方法就够了layui.use(layer, () { const layer layui.layer; // 3 秒后自动消失无遮罩不挡页面 layer.msg(保存成功); // 确认框点确定才执行回调 layer.confirm(确定删除这条记录吗, (index) { layer.close(index); // 执行完删除请求再关掉 }); });参数只记三个time是自动关闭的秒数0 表示不自动关icon是图标序号1 成功、2 错误shade是遮罩false就是不要那层灰色。其余配置用到时再查。换皮、动效、嵌页面定制统一走layer.open这个总入口type取值0 对话、1 HTML 内容、2 iframe、3 加载层、4 贴士层。换皮和嵌页面的区别其实就是三行配置的差异// 换皮主题 位置 动画 layer.open({ content: div stylepadding:15px自定义内容/div, title: 自定义弹层, skin: layer-my-skin, // 自定义类名样式自己写在 CSS 里 area: [500px, auto], offset: rt, // 右上角还支持 t / r / b / l / auto anim: 5, // 0~6 六种进场动画也支持 slideLeft 这类命名动画 }); // 嵌页面content 直接放 URLtype: 2 即 iframe layer.open({ type: 2, title: 订单详情, area: [800px, 600px], content: /order/detail.html, });offset不止四边lt、rb八个方位都认坐标换算逻辑在 layer 源码 的ready.updatePosition里。想整套换肤就去 layer.css 加自己的类名别动内置类升级时会还你一笔账。多弹层协同关谁、怎么关、关不掉会怎样结论先行每次layer.open都返回一个index数字所有关闭动作都针对它返回值存变量不要硬编码也不要猜。// 请求前拉一个 loading 层 const loadIndex layer.load(1, { shade: [0.1, #000] }); // 请求回来关掉它 fetchData().then(() layer.close(loadIndex)); // 按类型关只关最近的 loading 层 layer.closeLast(loading); // 按类型一键清空所有对话层 layer.closeAll(dialog);三个 API 的分工close(index)关指定层closeLast(type)关该类型里最近打开的一个closeAll(type)关该类型全部。后两个按类型匹配就算你没存 index 也不会误伤别人。而关不掉的代价是实打实的弹层 DOM 和事件监听一直挂在文档里loading 层的遮罩默认透明度只有 0.01 但照样拦截所有点击用户会以为页面卡死了。所以铁律是——凡是有异步操作的弹层把close写进 finally。四个高频坑与一行修复弹层被页面固定导航栏挡住。现象弹层弹出来却被导航条盖住。根因layer 默认 zIndex 是 19891014 且随新弹层自增但你页面里自定义的高 z-index 元素可能更狠。修复success回调里layer.setTop(layero)或 open 时显式传zIndex: 99999。遮罩没了页面却滚不动。现象弹层已关body 滚动条消失。根因layer 打开时把 html 的 overflow 设为 hidden正常关闭才会还原。修复别用 jQuery 手动 remove 弹层 DOM一律layer.close(index)。接口报错后 loading 遮罩常驻。现象请求 500 之后半透明遮罩一直糊在页面上。根因只在成功分支写了关闭。修复.catch(() layer.close(loadIndex))。iframe 弹层里取不到内部输入框。现象type: 2嵌的页面父文档里$(#xx)查无此元素。根因iframe 是独立文档根本不在父页面 DOM 树里。修复用内置的layer.getChildFrame(#xx, index)取子帧元素。另外要仿系统输入框那种表单弹层时直接layer.prompt别自己拼 input 加回调。延伸想看完整流程layer 源码 从内部 Class 到外部 API 全在一个文件里想边点边看效果layer.html 是官方示例页。核心 API 就这些剩下的靠手熟。【免费下载链接】layui一套遵循浏览器原生态开发模式的 Web UI 组件库。项目地址: https://gitcode.com/GitHub_Trending/la/layui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
