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

 有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

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

正文：

先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层;

<pre class="has">
<code class="language-html"><button bindtap="showview">Show

申请成功 您的密码为:123456

<pre class="has">
<code class="language-css">.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
}

<pre class="has">
<code class="language-javascript">Page({
data: {
display:''
},showview: function() {
this.setData({
display: "block"
})
},hideview: function() {
this.setData({
display: "none"
})
}
})