微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗实现详解(可通用）

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

自定义各种布局弹窗

点击弹窗布局外消失弹窗

弹出弹窗时背景阴影半透明

各方向弹出效果(本文为自下而上弹出)

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

点击昵称旁边的编辑按钮

弹出自定义弹窗

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

下面上代码，老规矩，还是微信小程序对应的几个文件的代码，可直接贴到页面里用的哦。

.wxml 文件中 直接放到wxml的最底部就行了，十分简练。

此处是填充的布局代码

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

.zan-dialog__mask {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 10;

background: rgba(0, 0, 0, 0);//设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4);

display: none;

}

.zan-dialog__container {

position: fixed;

bottom: 400rpx;