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

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

总点击411
简介:如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我获取问群里的大神!!!

如果对您有帮助,请关注我,欢迎加入微信小程序开发交流QQ群(173683866),有问题可以加群问我获取问群里的大神!!!

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


<button bindtap="showview">Show</button>

<view class="bg" bindtap='hideview' display:{{display}}'></view>

<view class="show" bindtap='hideview' 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"

})

}

})


意见反馈 常见问题 官方微信 返回顶部