微信小程序web-view实现蒙版

很多小伙伴在开发微信小程序的过程中遇到跳转H5的需求，那么跳转H5的时候会使用标签，这时候如果单纯的跳转H5页面会表示的很没有用户体验，效果也不佳。
经过研究，可以使用如下代码实现蒙版
wxml代码如下：

<view class="view">
    <web-view src="{{URL}}"></web-view>
    <cover-view class="share-button">
        <cover-view class="share-returnBtn" bindtap="returnCLick">
            返回
        </cover-view>
    </cover-view>
</view>

wxss如下

.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: red;
    z-index: 1000000;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.share-button {
    z-index: 999999;
    position: fixed;
    color: rgb(0, 0, 0);
    background-color: white;
    display: flex;
    width: 100%;
    height: 110rpx;
    display: flex;
    left: 0;
}

.share-returnBtn {
    width: 200rpx;
    height: 72rpx;
    box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(18, 46, 102, 0.5);
    line-height: 72rpx;
    text-align: center;
    font-size: 28rpx;

}

其实H5和CSS代码实现蒙版的关键还是
z-index: 999999;和cover-view缺少任何一个也不行！！并且只支持真机调试