怎么可以点击按钮弹窗是一个表格的样式_小程序的弹窗浮层实现

首先我们要在想要弹窗的页面上写下它的wxml，

<!-- 浮层 -->
 <view class="b1" hidden="{{flag}}">
   <view class="b2">
    <image src='http://www.90rs.cn/zb_users/upload/2019/04/201904112207581618699.jpg' />
    </view>
     <view class="t_w">
        <cover-view class="t_image" bindtap="closeMask">
          <cover-image src="/images/icon/xx.png"></cover-image>
        </cover-view>
     </view>
 </view>

这里用到小程序hidden属性，如果flag为true它就隐藏，跟Vue.js的v-show类似，这样写完后我们来添加一些样式，让他更像一个浮层（一般用于领取购物卷，抽奖等）；

/* 设置背景遮罩层样式 */

.b1 {
 position: fixed;
 width: 100%;
 height: 100%;
 top: 0;
 background: rgba(0, 0, 0, 0.8);
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

/* 设置展示图片大小 */

.b2 {
 width: 50%;
 height: 50%;
}

/* 设置展示图片与关闭按钮图片的距离 */

.t_w {
 margin-top: 20rpx;
}

/* 设置关闭按钮图片显示的大小 */

.b2 image {
 width: 100%;
 height: 100%;
}

/* 设置关闭按钮宽高 */

.t_image {
 width: 60rpx;
 height: 60rpx;
}

使用position定位让浮层定死在外面（记得要加z-Index），

写完样式后就是这个样子，在写简单的逻辑部分，只需要一个变量，以及两个控制函数（一个显示浮层，一个关闭浮层）。

data：{
    motto: '微信遮罩层显示',
    flag: true
}   

  showMask: function () {
    this.setData({
      flag: false
   })
 },

  closeMask: function () {
    this.setData({
      flag: true
   })
 },

这样我们就初始化我们浮层的设置，我们再只需要在需要的时间内弹窗即可达到目的，比如需要进入页面就弹窗，就可以在生命周期onload后，执行showMask函数，点击x icon时执行 closeMask函数就可以了。