【小程序】微信小程序实现居中弹窗（红包关闭效果）_小程序 红包弹窗

一、效果

 二、wxss代码

<!-- 弹出红包 -->
<view wx:if="{{isCloseCenter_1==1}}" class="pop_center_1">
  <view class="PanelCenter_1">
    <view class="PanelCenter1Row_1">
      <image src="../../images/close_1.png"></image>
    </view>
 
    <view class="PanelCenter1Row_2" bindtap="getRedBag">
      <image src="../../images/PopRedBag.png"></image>
    </view>
  </view>
</view>

三、js代码

 
    /**
     * 页面的初始数据
     */
    data: {
        isCloseCenter_1: 1, // 0-关闭 1-显示 弹出红包
    },
    // 领取[红包],关闭弹窗
    getRedBag: function () {
 
        this.setData({
            isCloseCenter_1: 0,
        })
    },

四、图片素材

关闭按钮：白色