微信小程序自定义弹窗如何实现详解？

本文共计798个文字，预计阅读时间需要4分钟。

原文：本文为自定义弹窗，该内容需求如下：自定义各种布局弹窗点击弹窗布局外侧消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果（本文为自下而上弹出）不多说，先上图看效果

本文介绍自定义弹窗设计，包含以下要求：实现不同布局的弹窗点击弹窗外区域使其消失弹窗出现时背景半透明显示支持各方向弹出效果（自下而上为主）详图展示效果，细节不赘述。

本文为自定义弹窗，该内容可满足如下需求：

• 自定义各种布局弹窗
• 点击弹窗布局外消失弹窗
• 弹出弹窗时背景阴影半透明
• 各方向弹出效果(本文为自下而上弹出)

话不多说，先上图看效果：

点击昵称旁边的编辑按钮

弹出自定义弹窗

上图是我自己拙劣的审美自定义的一个编辑弹窗，因为重点是自定义弹窗，所以在下文的通用代码中我就去掉了这些布局，剩下填充部分由读者自行填充。

下面上代码，老规矩，还是微信小程序对应的几个文件的代码，可直接贴到页面里用的哦。
.wxml 文件中 直接放到wxml的最底部就行了，十分简练。