微信小程序如何实现通用自定义弹窗功能？

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

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

简化版：自定义弹窗，支持多种布局，点击外部消失，弹出时背景半透，多方向弹出效果。详情请先看图。

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

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

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

点击昵称旁边的编辑按钮

弹出自定义弹窗

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

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

<view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}"> <view class="zan-dialog__mask" bindtap="toggleDialog" /> <view class="zan-dialog__container"> <view style='padding:100rpx;'>此处是填充的布局代码</view> </view> </view>

.wxss 文件中 直接放进去就行，根据注释可自行调节弹框带不带阴影。