点击触发 底部出现弹框功能 小程序

写页面时很多地方会有弹框，方便起见，整理了一个小模板。
代码如下

wxml

<view bindtap='showview'>点击</view>
<view class='showModel' wx:if="{{model == 1}}" catchtouchmove="return">
  <view class='van-modal' style='height:{{windowHeight}}px;width: {{windowWidth}}px' bindtap='model1'></view>
  <view class='selected'>

  
  </view>
</view>

js

 data: {
    model: 0,//弹框状态
  },
  showview: function () {//弹框显示
    this.setData({
      model: 1
    })
    console.log("111")
  },
  model1: function () {//弹框消失
    this.setData({
      model: 0
    })
  },

wxss

.van-modal{
-moz-opacity: 0.7;
opacity: 0.70;
filter: alpha(opacity=70);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
z-index: 200;
}
.selected{
  position: fixed;
  top: 50%;
  left:50%;
  transform: translate(-50% ,-50%);
  right: auto;
  background: #fff;
  z-index: 201;
 width: 80%;
  height: 60%;
  padding: 8rpx;
  border-radius: 6rpx;
}