在用小程式做專案的時候，自帶的彈窗不能新增標籤和各種事件，自定義的彈窗很靈活，想加什麼加什麼

html

<view>
  <view class="hiddenBtn" bindtap="clickBtn">彈彈彈</view>
  <view class="vedioCover" wx:if="{{hiddenBox}}">
    <view class="coverContent white">
      <view class="coverTitle">彈出框標題</view>
      <view class="coverSwiper">
        彈出框內容（各種自定義）
      </view>
      <view class="coverBottom" style="display: flex;">
        <view class="btn" bindtap="close">取消</view>
        <view class="btn" style="color:{{bgcolor}}" bindtap="surechoose">確定</view>
      </view>
    </view>
  </view>
</view>
 

js

data: {
    hiddenBox:false
  },
  clickBtn:function(){
    let _this=this
    _this.setData({
      hiddenBox:true
    })
  },
  close:function(){
    console.log("點選取消")
    let _this=this
    _this.setData({
      hiddenBox:false
    })
  },
  surechoose:function(){
    console.log("點選確定")
    let _this=this
    _this.setData({
      hiddenBox:false
    })
  },
 

css

.vedioCover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .5)
}
.coverContent {
  position: absolute;
  width: 610rpx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 30rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
}
.coverTitle {
  text-align: center;
  color: #333;
  font-weight: bold;
}
.coverSwiper {
  width: 545rpx;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.coverBottom {
  width: 100%;
  border-top: 1rpx solid #efefef;
}
.white {
  background-color: #fff;
}
.btn {
  width: 50%;
  border-right: 1rpx solid #efefef;
  color: #999999;
  line-height: 85rpx;
  text-align: center;
}
.btn:nth-child(2) {
  color: chocolate;
  border-right: 0;
}
.hiddenBtn{
  margin:100rpx auto;
  background-color: chocolate;
  color: #fff;
  width: 120rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius: 10rpx;
}
 

效果