Loading... 效果如下: ![123.png][1] ##### 1、wxml ``` <view class='' bindtap='showMask'>显示遮罩</view> <view class="mask" hidden="{{flag}}"> <view class="maskContent"> <view> <input class='input' placeholder="input" /> </view> <view> <input class='input' placeholder="input" /> </view> <view class='btn'>提交按钮</view> </view> <view class="closeImg" bindtap="closeMask"> <image class="closeImg_image" src="/images/close.png"></image> </view> </view> ``` ##### 2、wxss ``` /* 设置背景遮罩层样式 */ .mask { color:rgb(98 189 255)">position: fixed; color:rgb(73 238 255)">left: 0; color:rgb(255 111 119)">top: 0; color:rgb(255 95 0)">right: 0; color:rgb(255 211 0)">bottom: 0; color:rgb(98 189 255)">background: rgba(0, 0, 0, 0.5); color:rgb(253 97 106)">display: flex; color:rgb(98 189 255)">justify-content: center; color:rgb(98 189 255)">align-items: center; color:rgb(98 189 255)">flex-direction: column; } /* 设置遮罩内容样式 */ .maskContent { color:rgb(255 95 0)">width: 70%; color:rgb(98 189 255)">background: #fff; color:rgb(98 189 255)">border-radius: 5px; color:rgb(253 97 106)">padding: 30rpx; } /* 设置关闭按钮图片的位置 */ .closeImg { color:rgb(98 189 255)">position: fixed; color:rgb(255 111 119)">top: 40rpx; color:rgb(255 95 0)">right: 40rpx; } /* 设置关闭按钮宽高 */ .closeImg_image { color:rgb(255 95 0)">width: 50rpx; color:rgb(255 211 0)">height: 50rpx; } .btn{ color:rgb(255 95 0)">width: 80%; color:rgb(255 211 0)">margin: 20rpx auto; color:rgb(98 189 255)">background: #ff6600; color: #fff; line-color:rgb(255 211 0)">height: 60rpx; font-size: 32rpx; text-align: center; color:rgb(98 189 255)">border-radius: 3px; } .input{ border: 1px solid #ccc; color:rgb(98 189 255)">border-radius: 3px; font-size: 28rpx; color:rgb(253 97 106)">padding: 0 10rpx; color:rgb(255 211 0)">margin: 20rpx 0; line-color:rgb(255 211 0)">height: 60rpx; } ``` ##### 3、js ``` Page({ data: { flag: true, }, showMask: function () { this.setData({ flag: false }) }, closeMask: function () { this.setData({ flag: true }) } }) ``` [1]: https://www.huangshuxiu.com/usr/uploads/2022/11/854362062.png Last modification：November 2, 2022 © Allow specification reprint Like 如果觉得我的文章对你有用，请随意赞赏