微信小程序实现遮罩层(弹框)

最新推荐文章于 2025-03-13 20:48:02 发布

置顶 Why_n

最新推荐文章于 2025-03-13 20:48:02 发布

阅读量3.6w

点赞数 3

分类专栏：微信小程序资源

本文链接：https://blog.youkuaiyun.com/Why_n/article/details/79802462

版权

微信小程序同时被 2 个专栏收录

1 篇文章

订阅专栏

资源

1 篇文章

订阅专栏

实现微信小程序的遮罩层，代码可以在以下链接下载，没有积分可以留言邮箱地址，私发~~

index.wxml

<view>
<view class="zhezao" hidden="{{flag}}">
  <view class="t_w">

    <!--右上角图标开始-->
    <view class="t_image"  bindtap="conceal">
      <image class="t_image1" src="../../image/cross.png" ></image>
    </view>
    <!--右上角图标结束-->

    <!--弹出框开始-->
    <view class="tanchu_view">
      <view>
        <view class="bg_view">遮罩层</view>
        <view class="txtys">点击确定遮罩层</view>
         <!--确定开始-->
        <view class="txtsure"  >
          <view class="txtsurebg" bindtap="conceal">
              <text class="txtsurename">确定</text>
          </view>        
        </view>
         <!--确定结束-->
       </view>
    </view>
    <!--弹出框结束-->
  </view>
</view>
</view>

<view bindtap="show">点我显示</view>

设置各个控件背景及属性

index.wxss

.zhezao{
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  background:rgba(0,0,0,0.4);
  overflow: hidden;
  }
.t_w{
  position:relative;
  }
.tanchu_view{
  width: 80%;
  margin:25% auto;
  overflow: hidden;
  background-color: #fff1e6;
  border-radius: 10rpx;
  padding: 4rpx;
  }


.bg_view{
  margin:30rpx auto 30rpx auto;
  color:#fcb712;
  font-size:50rpx;
  background-color: #fff1e6;
  padding:0rpx 30rpx;
  text-align: center;
  }


  .txtys{
    font-size: 50rpx;
    text-align: center;
    margin-bottom: 200rpx;
  }

.txtsure{
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 margin: 20rpx;
}

/*确定背景*/
.txtsurebg{
  width: 300rpx;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin: 50rpx;
  background-color: burlywood;
   flex-direction: column;
}

/*确定图标*/
.txtsureimg{
  display:block;
  width:120rpx;
  height:120rpx;
}

/*确定文本*/
.txtsurename{
   margin-bottom: 0rpx;
   color: white;
   font-size: 70rpx;
}

/*右上角图标*/
.t_image{
  width:204rpx;
  height:200rpx;
  position: absolute;
  top: -6%;
  left:88%;
  }

/*右上角图标*/
.t_image1{
  display:block;
  width:60rpx;
  height:60rpx;
  }

重点在于js层，用hiddle的true和false来控制遮罩的显示或者隐藏，当flag设置为false时，显示；为true时，隐藏

index.js

  // 遮罩层显示
  show: function () {
    this.setData({ flag: false })
  },
  // 遮罩层隐藏
  conceal: function () {
    this.setData({ flag: true })
  },

代码下载地址：https://download.youkuaiyun.com/download/why_n/10324550