本文介绍如何在微信小程序中实现自定义遮罩层效果。通过定义背景遮罩层与内容弹窗的WXML结构，利用CSS控制绝对定位、透明度及层级，并结合Page中的setData方法动态切换display属性，实现点击按钮显示、点击屏幕任意位置隐藏遮罩层的交互逻辑。
正文：
首先展示最终实现的交互效果：用户点击“Show”按钮时，遮罩层及内部弹窗显示出来；随后点击屏幕上的任意空白区域，遮罩层与弹窗同时隐藏。
<button bindtap="showview">Show</button>
<view class="bg" bindtap='hideview' style='display:{{display}}'></view>
<view class="show" bindtap='hideview' style='display:{{display}}'>申请成功
<view class='txt'>您的密码为:123456</view>
</view>.bg {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
}
.show {
display: none;
text-align: center;
position: absolute;
top: 45%;
left: 20%;
width: 53%;
height: 10%;
padding: 8px;
border: 8px solid #e8e9f7;
background-color: white;
z-index: 1002;
overflow: auto;
}
.txt{
margin-top: 20rpx;
font-size: 28rpx;
color: royalblue
}Page({
data: {
display:''
},
showview: function() {
this.setData({
display: "block"
})
},
hideview: function() {
this.setData({
display: "none"
})
}
})至此，关于微信小程序中实现自定义遮罩层的介绍完毕。如需了解更多小程序自定义遮罩层相关内容，建议查阅本站往期文章或继续浏览后续教程，感谢大家的支持。