小程序自定义弹窗&&蒙版||遮罩层_小程序自定义弹出框

 页面部分

<!-- 自定义遮罩层 -->
<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;
}