微信小程序 自定义弹框 遮罩

效果图

wxml

给需要点击的view增加事件

 

bindtap="goAlert"

 

<!-- 弹框 -->
 <view class='bg' wx:if="{{alert==1}}"> 
    <view class='bg-alert'>
        <view  wx:for="{{alertLlist}}"  data-index='{{index}}' class="{{selected==index?'show-alert':'hidden-alert'}}" bindtap='selected'>{{item}}</view>
    </view> 
</view>

wxss

/*弹窗  */
.bg{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  background: rgba(0, 0, 0, 0.6)
}
.bg-alert{
  width:560rpx;
  height: 320rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin: 320rpx auto;
}
.gb-txt{
  height: 106rpx;
  border-bottom: 2rpx solid #d2d3d5;
  text-align: center;
  line-height: 106rpx;
}
.show-alert{
  color: #14a1fd;
  height: 106rpx;
  border-bottom: 2rpx solid #d2d3d5;
  text-align: center;
  line-height: 106rpx;
}
.hidden-alert{
  color: #999;
  height: 106rpx;
  border-bottom: 2rpx solid #d2d3d5;
  text-align: center;
  line-height: 106rpx;
}

js

Page({

/**
* 页面的初始数据
*/
data: {
alert: 0,
alertLlist: ['选项A', '选项B','选项C'],
selected: 0,
index:0
},

  selected: function (e) {
    // console.log(e)
    let that = this
    let index = e.currentTarget.dataset.index
    // console.log(index)
    if (index == 0) {
        that.setData({
          selected: 0,
            alert: 0
        })
    } else if (index == 1) {
      that.setData({
        selected: 1,
        alert: 0
      })
    } else{
      that.setData({
        selected: 2,
        alert: 0
      })
    }
  },
  goAlert :function (){
    let that = this
    that.setData({
      alert:1
    })
  },