Layer弹窗入门（下）

为什么“下半场”容易卡壳

很多前端转岗或临时接手老项目的人，对 Layer 弹窗的认识往往停留在“会抄一段 layer.open 弹个表单”就戛然而止了。一旦遇到产品要求按钮带异步校验、需要手动关闭特定弹层、或者要求提示框吸附到某个输入框旁边时，就只能到处翻文档拼凑代码。这门课正是针对这种“半懂不懂”的状态做收口。它不谈组件库优劣，也不讲底层源码，而是把 Layer 实际项目里最常用的一整套内置方法逐个拆开讲清楚。如果你的基础是写过几行 jQuery、能看懂基础 HTML 结构，但没系统用过 Layer 全家桶，那么这节课刚好用来补齐这块短板。别假装自己什么都会，遇到 closeAll 关不掉弹层、tips 吸附位置错乱时再查文档，远不如现在按顺序过一遍来得扎实。

建议先看哪几块，怎么配合练习

拿到资料后，建议按顺序看全局配置、原始核心方法 open、以及 close 关闭层这三块，它们是整个弹窗机制的骨架。全局配置决定了后续所有弹层默认的皮肤、动画与遮罩行为，理解它之后再去用 alert、confirm、msg，你会清楚哪些参数可以被覆盖，哪些是全局生效的。open 是最底层的方法，alert 和 confirm 本质上都是它的封装变体，先弄懂 open 的各类参数结构，后面遇到复杂表单弹层时就不会无从下手。看完这三个基础后，必须动手做配套练习：建一个空页面，引入对应版本的库文件，自己写一个包含表单提交校验的弹窗，要求做到点击提交后弹出 msg 提示，并在异步校验通过后用 close 方法手动销毁弹层。不要只看不动手，那些 ready 初始化就绪和 style、title 动态修改的方法，只有在真实交互逻辑里调用一遍，你才会明白它们在什么业务场景下能派上用场。

学完能独立做什么，看完应能回答什么问题

把这套内置方法过完，你应该能在老项目里独立处理任何基于 Layer 的交互需求，而不是只会复制粘贴官方示例。具体来说，你能根据业务场景在 alert、confirm、msg、load、tips 之间做出准确选择，知道何时该用 load 遮罩避免重复提交，何时用 tips 做表单错误吸附提示，而不是一股脑全用 alert 弹窗糊弄用户。学完后，你应该能清晰回答以下几个问题：全局配置里的某个参数在单个方法里如何被覆盖？open 方法的核心配置项有哪些与关闭行为直接相关？confirm 的两个按钮回调如何阻止默认关闭以进行额外校验？tips 吸附元素时位置偏移怎么控制？close 方法如何精准关闭某个特定弹层而不是关掉所有？如果这些问题你都能对答如流，说明这块能力缺口已经补上，可以放心去写业务了。