经常会遇到点击按钮后弹出遮罩层,遮罩层上有个垂直水平居中的层,今天做个笔记,方便后面复制(干货啊),话不多说,用微信小程序举例,h5也是一样的。
上效果图:demo将就看下,自己化妆。
上菜(代码):
遮罩层+垂直水平居中层
<!-- 遮罩层 -->
<view class='maskDiv' wx:if='{{isShowMask}}'></view>
<view class='mainDiv' wx:if='{{isShowMask}}'>
<view style='text-align: center;margin-top: 3vw;'>隐私政策</view>
<view style="font-size: 4vw;margin-top: 6vw;">
<view style='padding: 0 2vw;'>收集姓名、手机号码、身份证仅仅用于用户注册及后续的实名业务办理,无其它用途。。。。。。</view></view>
<view bindtap='readClick' style='background: #ddd; margin: 8vw 30vw; text-align: center; border-radius: 5vw;'>已读</view>
</view>
.maskDiv {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 100;
}
.mainDiv {
position: absolute;
margin: auto;
height: 42vw;
left: 10vw;
right: 10vw;
top: 0;
bottom: 0;
background: #fff;
z-index: 110;
width: 80vw;
border-radius: 4.3vw;
}
data: {
isShowMask:false
},
readClick(){
this.setData({
isShowMask:false
})
},
//按钮上写一个时间,让遮罩弹出
showModel(){
this.setData({
isShowMask:true
})
},