打开微信，随便点进一个小程序，弹窗几乎是无处不在的。领优惠券的、提示登录的、活动报名的、抽奖的……你每次点“关闭”的时候，可能都没想过，这玩意儿是怎么做出来的。但真到了自己要做小程序的时候，第一道坎往往就是这个弹窗。网上教程一堆，但大多是从代码层面讲，什么、，小白看了直接劝退。今天这篇，我就用大白话，把小程序弹窗这件事给你捋清楚，保证你看完能自己动手做一个。

先说个误区。很多人一提到弹窗，第一反应就是“写代码”。没错，代码是绕不开的，但你别把它想得太可怕。小程序里的弹窗，说白了就分两种：一种是微信官方给你准备好的现成弹窗，你只需要调用一下，填几个参数就行，这叫“原生弹窗”；另一种是你自己画一个弹窗，想让它长啥样就长啥样，这叫“自定义弹窗”。咱们先从简单的来，原生弹窗里，最常用的就是。你只需要在代码里写一行，它就能弹出一个带“确定”和“取消”按钮的对话框。比如用户点了“删除”按钮，你弹一个“确定要删除吗？”，用户点确定才执行删除，点取消就啥也不干。这个弹窗的好处是省事，不用管样式，微信都给你做好了，而且它自带层级，不容易出乱子。

但问题来了，原生弹窗的样式太丑了，而且它只能显示文字和按钮，你想在弹窗里放个图片、放个表单、放个视频，它就无能为力了。这时候，你就得用自定义弹窗。自定义弹窗的思路其实特别简单：你先在页面的文件里写一个弹窗的模板，用标签把弹窗的内容包起来，然后用或者属性控制它显示还是隐藏。默认是隐藏的，当用户触发某个动作，比如点击“领取优惠券”按钮，你就把控制显示的那个变量改成，弹窗就出来了；用户点关闭按钮，你再把它改成，弹窗就消失了。

这里面有几个细节，是很多教程不会告诉你的。第一，弹窗的背景遮罩层。你肯定不想让用户点了弹窗外面的区域，弹窗没反应吧？所以你要做一个全屏的半透明黑色背景，盖住底下的页面。这个背景通常用一个标签，宽度设为，高度设为，背景色设成，然后把它和弹窗内容放在同一个层级下。第二，弹窗的定位。你要让弹窗在屏幕中间，一般给弹窗内容加一个，然后、，再用把它居中。第三，也是新手最容易踩的坑——。如果你不做处理，弹窗弹出来之后，底下的页面还是能上下滑动，体验特别差。你需要在遮罩层上加上，把触摸事件拦截掉，这样用户就只能操作弹窗，不能滑底下的页面了。

光有显示和隐藏还不够，你还需要考虑弹窗的动画效果。微信小程序里有一个和配合属性的写法，但说实话，对小白来说有点绕。更简单粗暴的方式是，在弹窗内容上加上样式，比如，然后通过控制一个名来切换弹窗的透明度、缩放比例，从而实现淡入淡出或者从中间放大的效果。我给你举个例子：弹窗内容的初始样式是，当显示弹窗时，你给它加上一个新的class，这个class里写，这样弹窗就会有一个从小到大、从透明到清晰的动画过程。关闭的时候，再把这个class去掉，动画就反向播放。

弹窗的内容是千变万化的，但你要记住一个原则：弹窗不是越多越好。我见过不少小程序，一进去先弹个广告，再弹个授权，再弹个优惠券，用户还没看清页面是啥，就先关了三四个弹窗。这种体验，用户大概率直接关掉小程序。所以你在设计弹窗的时候，一定要想清楚：这个弹窗给用户带来了什么价值？如果是强制性的，比如必须登录才能使用，那就别给用户关闭按钮，让他只能点“去登录”；如果是非强制的，比如优惠券，那就一定要有个明显的关闭按钮，而且最好点击遮罩层也能关闭，减少用户的挫败感。

再来说一个进阶一点的需求：弹窗里嵌表单。比如你要做一个“填写问卷”的弹窗，里面要有输入框、单选框、提交按钮。这个怎么做呢？其实还是用自定义弹窗，只不过弹窗内容里除了标签，还要加上、这些表单组件。你需要注意一个问题：输入框在弹窗里可能会被键盘顶上去，导致布局错乱。解决办法是，在里设置，并且给弹窗内容加上属性设为，这样键盘弹起时就不会把弹窗整个顶飞了。另外，表单提交之后，你要记得把弹窗关掉，并且把数据清空，不然下次打开，用户上次填的内容还在，容易产生误会。

有些弹窗还需要和服务器交互，比如用户点“抽奖”按钮，弹窗里显示“抽奖中”，然后等服务器返回结果，再显示“恭喜你中了XX”。这种场景，你要在弹窗里加一个加载状态。具体做法是，在弹窗模板里放两个，一个显示“抽奖中”，一个显示“抽奖结果”，用控制显示哪个。当用户点击按钮时，先显示“抽奖中”，同时发一个请求到后端，等请求返回了，再根据结果切换显示。这里有个小技巧，为了防止用户重复点击，你可以在请求期间把按钮的属性设为，等请求完成再恢复。

我强烈建议你去看看微信官方文档里关于和的部分，这两个是原生弹窗里最常用的。但你要记住，原生弹窗只能解决“提示”和“确认”这两个最简单的场景，但凡你想让弹窗长得好看点、功能复杂点，都得走自定义弹窗这条路。做自定义弹窗，你不需要会什么高深的算法，你只需要会写、、这三个东西，再配合一点CSS，就能应付绝大多数需求了。

写到这里，你可能会觉得，弹窗这事儿说简单也简单，说难也难。简单在于它的核心逻辑就那几个，难在于你要考虑各种边界情况——键盘遮挡、触摸穿透、动画卡顿、重复触发。但你别怕，这些都是经验问题，你做一个弹窗踩过一遍坑，做第二个就顺了。我建议你从最简单的原生弹窗开始，先跑通流程，再尝试自定义弹窗，加上动画和交互。每一步都不难，难的是你愿意动手去试。小白和高手之间的差距，往往不是智商，而是“我试试”这三个字。现在，你可以打开开发者工具，新建一个页面，试试把你的第一个弹窗弹出来吧。