本文是一个自定义弹出窗口，可以满足以下要求：

自定义各种布局弹出窗口单击弹出窗口消失在布局之外。当弹出窗口弹出时，背景阴影是半透明的，向四面八方弹出(本文自下而上弹出)。话不多说，先看看上面的效果：

单击昵称旁边的编辑按钮

弹出自定义弹出窗口

上图是我自己审美定制差的编辑弹出窗口。因为重点是自定义弹出，我将在下面的通用代码中删除这些布局，剩下的填充部分将由读者自己填充。

下面的代码和往常一样，是微信小程序对应的几个文件的代码，可以直接贴在页面上使用。把。wxml文件直接放在wxml的底部，非常简洁。

view class=' Zan-dialog { { showDialog？Zan-dialog-show ' : ' ' } } ' view class=' Zan-dialog _ _ mask ' bind tap=' togglesialog '/view class=' Zan-dialog _ _ container ' view style=' padd :100 rpx；'下面是填充的布局代码/视图/view/view.wxss文件。直接放进去就行了。根据评论，你可以调整有或没有阴影的框架。zan-dialog__mask { position:已修复；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:无；}.Zan-dialog _ _ container { position :固定；bottom: 400rpx宽度： 650 rpx；//弹出窗口布局宽度高度： 350 rpx；//弹出窗口布局高，与下面的弹出距离变换有关。左边距left: 50rpx背景# f8f8f8transform : translateY(300%)；//弹出框的弹出距离与弹出框的布局高度有关。例如，300%表示弹出距离是弹出窗口高度的3倍transition: all 0.4s easez-index : 12；border-radius : 20 rpx；box-shadow : 0px 3px 2px gainsboro；//项目符号框的浮动阴影效果，如果不需要，可以标注这一行}。赞-对话-展示。Zan-dialog _ _ container { transform : translate y(0)；}.赞-对话-展示。Zan-dialog _ _ mask { display : }块；}.js文件来处理弹出和弹出消失逻辑，以及自定义弹出中的业务逻辑。

page({ data : { showdialog : false }，/* * *控制pop的打开和关闭*该方法有以下功能：2: * 1:点击弹出窗口以外的位置可以使弹出窗口消失* 2:*/togglesialog(){ This。使用弹出或关闭弹出窗口this.data.showDialog }的业务逻辑时，可以调用setdata({ showdialog 33366 })；}，以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。