微信小程序自定义弹框功能实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39702981/article/details/85320926

微信小程序自定义弹框功能实现

先上图

.wxml

<view class='tk' bindtap="wqd">
         点击弹出
</view>



<!-- 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
  <!-- 弹出层 -->
  <view class="modalDlg" wx:if="{{showModal}}">
  <!-- 二维码或其他图片 -->
      <text style='font-size:39rpx;font-weight:bold;padding-top:50rpx;'>签到提示</text>
      <view class='text'>
        <text class="text">+10</text>
        <text space="ensp" style="color:#ccc;font-size:30rpx;">  经验</text>
      </view>
  <view bindtap="ok" class="ok">我知道了</view> 
</view>

.wxss

/* 遮罩层 */
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.5;
}
/* 弹出层 */
.modalDlg{
  width: 70%;
  position: fixed;
  top: 200rpx;
  left: 0;
  right: 0;
  z-index: 9999;
  margin: 0 auto;
  background-color: #fff;
  border-radius:5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 弹出层里面的按钮 */
.ok{
  line-height: 35px;
  text-align: center;
  font-size: 15px;
  margin:0rpx auto;
  border-radius: 100px;
}
/* 弹出层里面的文字 */
.text{
  text-align: center;
  font-size: 60rpx;
  color: red;
  width: 100%;
  margin-top: 50rpx;
  padding-bottom:50rpx;
  font-weight:bold;
  border-bottom:1rpx solid #d6d6d6;
}

.js

Page({
  data: {
    showModal: false,
  },
  onLoad: function () {

  },
  // 未签到
  wqd: function (e) {
    this.setData(
      {
        showModal: true
      }
    )
    
  },
  ok: function () {
    this.setData({
      showModal: false
    })
  },
})