页面部分
<!-- 自定义遮罩层 -->
<view class="mask" wx:if="{{!showPopover}}"></view>
<!-- 自定义弹窗-->
<view wx:if="{{!showPopover}}" style="background-color: white;width:
70%;position: absolute;top: 40%;left: 15%; border-radius: 10px; z-index: 999;">
<view style="text-align: center;color: black;margin: 20px 0;">
<text>请输入</text>
</view>
<view style="border: black 1px solid; border-radius: 6px;margin: 5px 30px;font-
size: 13px;">
<input type='text' model:value="{{inputs}}" placeholder="请输入"
style="padding-left: 8px;" />
</view>
<view style="margin: 20px 30px;">
<button bindtap="close" size="mini" type="default" style="color:
white;background-color: #999999; width: 45%;margin-right: 10%;">取消</button>
<button bindtap="submit" size="mini" type="warn" style="color:
white;background-color: #e6384d; width: 45%;">提交</button>
</view>
</view>
js部分控制值‘showPopover’来显隐
bindtap:绑定触发事件
遮罩层与弹窗显隐同步,z-index来控制层级展示
遮罩层的样式
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 90;
opacity: 0.7;
}