小程序弹出半角遮罩层

❤️❤️❤️❤️❤️❤️ ??? 茫茫人海千千万万，感谢这一刻你看到了我的文章，感谢观赏，大家好呀，欢迎加入人工智能交流群（看我的动态），更多周边福利等你???

✨✨欢迎订阅本专栏或者关注我，大家一起努力每天一题算法题✨✨

❤️❤️❤️ 最后，希望我的这篇文章能对你的有所帮助！

基础代码：

wxml

``````<!--pages/index/components/buy/index.wxml-->
<view class="box" >
<view class="empty-box" bindtap="hideModal" id="empty-box"></view>
<scroll-view scroll-y style="max-height:80vh;">
<view class="content" style="transform:translateY({{translateY}}px);" animation="{{animate}}">
<!-- boll -->
<view style="height: 700rpx;"></view>

<!-- 按钮 -->
<view class="button" bindtap="confirm">
<view>确认</view>
</view>

</view>
</scroll-view>
</view>
``````

css

``````/* pages/index/components/buy/index.wxss */

.flex {
display: flex;
align-items: center;
}

.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}

.empty-box {
flex: 1;
background-color: transparent;
}

/* 内容视图 */

.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
z-index: 1001;
}

/* 头部 */

position: relative;
height: 80rpx;
width: 100vw;
}

position: absolute;
top: 26rpx;
left: calc(50vw - 30rpx);
width: 60rpx;
height: 10rpx;
background: rgba(161, 166, 175, 1);
opacity: 0.6;
}

/* 快递 */

.item {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100vw - 80rpx);
height: 100rpx;
background: rgba(255, 255, 255, 1);
opacity: 1;
}

.item-no-selected {
width: 36rpx;
height: 36rpx;
background: rgba(255, 255, 255, 1);
border: 2rpx solid rgba(112, 112, 112, 1);
opacity: 0.5;
}

.item-selected {
width: 40rpx;
height: 40rpx;
}

/* 按钮 */

.button {
width: 100vw;
}

.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: rgba(237, 58, 74, 1);
opacity: 1;
}
``````

实现点击显示

`````` <view  style="background-color: yellowgreen;width: 190rpx;height: 70rpx;margin-right: 5rpx;margin-left: 5rpx;justify-content: center;display: flex;flex-direction: row;align-items: center;border-radius: 10rpx;color: white;" bindtap="show_hideModal">获取授权码</view>
``````

``````show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})

},
``````

实现点击阴影部分关闭

``````hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
``````

THE END