[微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

先上效果图: 点击按钮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"})}})