uniapp自定义模态框

<button type="primary" class="btnBg fujiabtn" @tap="invoiceHandle">发票识别</button>
<view class="popupBox">
  <view class="maskName" v-if="invoiceShow" @tap="invoiceShow=false"></view>
  <view class="newForm" v-if="invoiceShow" style="top: 20vh;">
    <view class="title">分局人员筛选列表</view>
  </view>
</view>
invoiceShow: false,
invoiceHandle(){
  this.invoiceShow = true
},
.maskName {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  height: 100vh;
  background: rgb(0 0 0 / 50%);
  overflow: hidden;
}
.newFormName {
  background: #FFFFFF;
  padding: 10px;
  position: absolute;
  z-index: 9999;
  top: 0;
  margin: 10px;
  left: 0;
  width: 90%;
  border-radius: 5px;
}
.newForm {
  background: #FFFFFF;
  padding: 10px;
  position: absolute;
  z-index: 999;
  top: 0;
  margin: 10px;
  left: 0;
  width: 90%;
  border-radius: 5px;
  height: 87vh;
  overflow-y: auto;
}
.nweflex {
  padding: 5rpx 10rpx;
  background: #007AFF;
  color: #FFFFFF;
  width: 25%;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}
.mask {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  height: calc(100vh - 44px);
  background: rgb(0 0 0 / 50%);
  overflow: hidden;

}

版权声明:本文为Guoyu1_原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。