小程序遮罩层

wxml:

<!-- 遮罩层 -->

<view wx:if="{{carAdd}}">

  <view class="cover" catchtap="closeBg"></view>

  <view class="wxshare">

    <view class="add_box1">

      <view class="add_box1_1">

        <image src="../../images/icon/tthree.png"></image>

      </view>

      <view class="add_box1_2">2100积分</view>

      <view class="add_box1_3">已选</view>

    </view>

    <view class="add_box2">

      <view class="add_box2_1">购买数量</view>

      <view class="add_box2_2">

        <!-- 加减按钮： -->

        <view class="selectNumber" style="float: right;">

          <form bindsubmit="onDecGoodsNumber" report-submit="true">

            <button formType="submit" class="default {{ order_total_num > 1 ? '' : 'default-active' }}" type="default">-</button>

          </form>

          <input bindinput="onInputGoodsNum" type="number" value="{{ order_total_num }}"></input>

          <form bindsubmit="onIncGoodsNumber" report-submit="true">

            <button formType="submit" class="default" type="default">+</button>

          </form>

        </view>

      </view>

    </view>

    <view class="add_box3">立即兑换</view>

  </view>

</view>

 

wxss:

.cover{

  position: absolute;

  top: 0;

  display: block;

  width: 100%;

  height: 100%;

  background-color: #333;

  z-index: 999;

  display: block;

  position: absolute;

  opacity: 0.4;

}

.wxshare{

  width: 100%;

  height: 470rpx;

  background: #fff;

  position: fixed;

  bottom: 0;

  z-index: 9999;

}

.add_box1{

  width: 690rpx;

  height: 160rpx;

  position: relative;

  margin-top: 30rpx;

  margin-left: 30rpx;

}

.add_box1_1{

  width: 160rpx;

  height: 160rpx;

  position: absolute;

  background: rgb(226, 221, 221);

}

.add_box1_1 image{

  width: 100%;

  height: 100%;

}

.add_box1_2{

  position: absolute;

  margin-left: 180rpx;

  font-size: 40rpx;

  font-weight: 800;

  color: #f47767;

  height: 60rpx;

}

.add_box1_3{

  position: absolute;

  margin-left: 180rpx;

  margin-top: 60rpx;

  font-size: 24rpx;

  color: #777;

}

.add_box2{

  position: relative;

  float: left;

  margin-left: 30rpx;

  /* background: #f00; */

  width: 690rpx;

  height: 100rpx;

  line-height: 100rpx;

  margin-top: 20rpx;

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;

}

.add_box2_1{

  position: absolute;

}

.add_box2_2{

  position: absolute;

  right: 0;

  margin-top: 22rpx;

}

.add_box3{

  width: 70%;

  height: 96rpx;

  background: #f47767;

  position: absolute;

  bottom: 30rpx;

  margin-left: 15%;

  border-radius: 400rpx;

  text-align: center;

  line-height: 96rpx;

  color: #fff;

  font-size: 36rpx;

}

 

 

 

js:

data: {

    carAdd: "",

  },

 

//关闭弹窗

closeBg:function(){

  this.setData({

    carAdd: false,

    // isScroll: true

  })

},

 

// 打开弹框，绑定到需要点击的内容

  goAdd: function(e){

    this.setData({

      carAdd: true,

    })

  },