微信小程序自定义弹窗实现详解(可通用）主要介绍了微信小程序自定义弹窗实现详解(可通用）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下本文为自定义弹窗，该内容可满足如下需求：自定义各种布局弹窗点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出)话不多说，先上图看效果：点击昵称旁边的编辑按钮弹出自定义弹窗上图是我自己拙劣的审美自定义的一个编辑弹窗，因为重点是自定义弹窗，所以在下文的通用代码中我就去掉了这些布局，剩下填充部分由读者自行填充。下面上代码，老规矩，还是微信小程序对应的几个文件的代码，可直接贴到页面里用的哦。.wxml文件中直接放到wxml的最底部就行了，十分简练。此处是填充的布局代码.wxss文件中直接放进去就行，根据注释可自行调节弹框带不带阴影。.zan-dialogmask{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-dialogcontainer{position:fixed;bottom:400rpx;width:650rpx;//弹窗布局宽height:350rpx;//弹窗布局高，与下面弹出距离transform有关margin-left:50rpx;background:#f8f8f8;transform:translateY(300%);//弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度transition:all0.4sease;z-index:12;border-radius:20rpx;box-shadow:0px3px3px2pxgainsboro;//弹框的悬浮阴影效果，如不需要可注释该行}.zan-dialog--show.zan-dialogcontainer{transform:translateY(0);}.zan-dialog--show.zan-dialogmask{display:block;}.js文件中处理弹框弹出消失逻辑，以及自定义弹窗里的业务逻辑。Page({data:{showDialog:false},/***控制pop的打开关闭*该方法作用有2:*1：点击弹窗以外的位置可消失弹窗*2：用到弹出或者关闭弹窗的业务逻辑时都可调用*/toggleDialog(){this.setData({showDialog:!this.data.showDialog});},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
