微信小程序点击按钮/view，弹夹上会显示带口罩的层，可以关闭效果图。 按钮，然后单击代码： mask demo.wxmlmaskdemo.wxsmaskdemo.js
效果图
单击按钮后：
代码： mask demo.wxmlbuttonbindtap=' show rule ' style=' width 336065 VW ' class=' receive file '点击弹窗模式框/button！ -遮罩层--view class=' rulezhezhao { { isruletrue？' isruleshow ' : ' isrulehide ' } ' view class=' rulezhezhaocontent ' imageclass=' Dow icon ' src='/images/receive imageinputclass=' input code ' type=' text ' placeholder='接收代码' bindinput=' bind code '/button class=' open '/buttonimagesrc='/images/close icon.png ' class=' rulehide ' bind tap=' hide rule '/image/view/viewmaskdemo background: #fff； color: #175acb； border: 2rpx solid #175acb； }.dowicon{ width: 68px； height: 68px； 边距-顶级： 50px； margin:20px 117px 0px 122px； 文本照明3360中心； }.input code { padding-left :20 rpx； height: 40px； width: 78%； 颜色： # 000； 字体权重：正规； background-color: #F6F6FF； border :1 pxsolidrgb (231、230、230 )； 边距： 17px； }.open { background-color : # 888888； border-radius: 30px； 字体权重：正规； color: #fff； 边距- bottom : 50px； 边距： 10px 10px 10px 10px； }.ruleHide{ height: 60rpx！ 导入； width: 60rpx！ 导入； 定位：助手； top: 10rpx； right: 10rpx； }.isRuleShow{ display: block； }.isRuleHide{ display: none； }.ruleZhezhao{ height: 100%； width: 100%； 定位：固定； border: 1px solid springgreen； background-color : rgba (0，0，0，5)； top: 0； left: 0； z-index: 999； }.rulezhezhaocontent { padding :56 rpx 0px； width: 80%； background: #fff； 边距： 20 %自动； border-radius: 20rpx； display :闪存； flex-direction :列； justify-content 3360空间阵列； align-items3360中心； 定位：关系； } mask demo.js//pages/mask demo/mask demo.js page ({/* * *页面上的初始数据(/data: ) showview3360true )， //打开规则时显示showRule: function () this.setdata ) (isruletrue:true ) }，//关闭规则提示hide rule : function () onload:function )，options ) }，onreaad onShow: function，/** *生命周期函数- -隐藏监听页面*/onHide: function /** *生命周期函数- -卸载监听页面*/onUnload: function /**页面相关事件处理程序- -用户下拉操作*/onpulldownrefrefred /** *页面上的下拉触摸事件处理程序(*/onReachBottom: function ) }，/**用户单击右上角，*/onshareappmessage 3360 function