wx 小程序 cover-view 覆盖在原生组件之上的文本视图

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。

以map 为例：

wxml: 将cover-view 放到map标签里面

<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location></map>
  </view>
  <view class="btn-area">
    <!--弹窗-->
    <button class="show-btn" bindtap="showDialogBtn">弹窗</button>

    <cover-view class="modal-dialog" wx:if="{{showModal}}">
      <cover-view class="modal-title">提示</cover-view>
      <cover-view class="modal-content">注册后可获得更多优质服务</cover-view>
      <cover-view class="modal-footer">
        <cover-view class="btn-confirm" bindtap="onConfirm" data-status="confirm">确定</cover-view>
        <cover-view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</cover-view>
      </cover-view>
    </cover-view>
  </view>
</view>

js:

Page({
   data: {
      showModal: false,
   },
    /**
    * 弹窗
    */
   showDialogBtn: function () {
      this.setData({
         showModal: true
      })
   },

   hideModal: function () {
      this.setData({
         showModal: false
      });
   },
   onCancel: function () {
      this.hideModal();
   },
   onConfirm: function () {
      this.hideModal();
   }
});

wxss:

/**弹框**/
.modal-dialog {
    width: 451rpx;
    height: 321rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background-color:rgba(0,0,0,0.8);
    margin: -180rpx 150rpx;
    border-radius: 6rpx;
}
.modal-title {
    padding-left: 38rpx;
    padding-top: 24rpx;
    color: #ffffff;
    text-align: left;
}

.modal-content{
    padding-top: 30rpx;
    font-size: 30rpx;
    color: #ffffff;
    text-align: center;
}

.modal-footer {
    padding-top: 60rpx;
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 0px solid rgba(0,0,0,0.8);
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-confirm {
    margin-left: 57rpx;
    width: 134rpx;
    height: 68rpx;
    line-height: 68rpx;
    color: #ffffff;
    font-size: 32rpx;
    text-align: center;

    background-color: #146755;
    border-radius: 33rpx;
}
.btn-cancel {
    text-align: center;
    margin-left: 60rpx;
    width: 134rpx;
    height: 68rpx;
    line-height: 68rpx;
    color: #333333;
    font-size: 32rpx;

    background-color: #cccccc;
    border-radius: 33rpx;
}

效果：