微信小程序模态弹窗之js

<!-- 邀请好友模态框 -->
    <view class="shade" wx:if="{{ showmodal }}" >
        <view class="mask" bind:tap="hideShade"></view>
        <view class="shade-content">
            <image mode="widthFix" src="/static/images//code-02.png" />
            <view class="text">让朋友扫一扫上面的二维码</view>
            <view>邀请他加入</view>
        </view>
    </view>

.shade{
        position: fixed;
        top: 0 ;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
        padding: 179rpx 63rpx 307rpx;

        .mask {
            position: absolute;
            top: 0 ;
            left: 0;
            right: 0;
            bottom: 0;
            background:rgba(0,0,0,.6);
        }

        .shade-content {
            position: absolute;
            padding: 72rpx 72rpx 44rpx;
            width: 624rpx;
            height: 720rpx;
            background: #fff;
            border-radius: 16rpx;
            text-align: center;
            z-index: 99;
            image {
                width: 480rpx;
                height: 480rpx;
            }
            .text {
                margin-top: 40rpx;
            }
        }
    }

data: {
    showmodal: false
  },

  inviteFriend() {
    this.setData({
      showmodal: !this.data.showmodal
    })
  },

  hideShade() {
    this.setData({
      showmodal: false
    })
  },

html，css手动构建模态弹窗的两种方式：

1. 分两块写，模态窗和内容分开，然后通过position的方式来实现
2. 放一块写，利用层级关系来控制（z-index）,这样写会出现事件捕获