uniapp自定义模态框

最新推荐文章于 2024-08-07 15:55:56 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-08-07 15:55:56 发布

阅读量3.9k

点赞数 3

分类专栏： uniapp css

本文链接：https://blog.csdn.net/Guoyu1_/article/details/110930369

版权

uniapp 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

css

23 篇文章 0 订阅

订阅专栏

<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;

}