Wechat applet custom pop-up components

design sketch ： 

<!--components/popup/popup.wxml-->
<view class="popup" hidden="{
   {flag}}">
  <view class='popup-container'>
    <view wx:if="{
   {title}}" class="popup-title">{
   {title}}</view>
    <view>
    </view>
    <view class="popup-con">
      <image src="{
   {image}}" />
      <view>{
   {content}}</view>
    </view>
    <view class="popup-btn">
      <text class="btn-no" bindtap='_error'>{
   {btn_no}}</text>
      <text class="btn-ok" bindtap='_success'>{
   {btn_ok}}</text>
    </view>
  </view>
</view>

// components/popup/popup.js
Component({
  /**
   * Component properties
   */
  properties: {
    title: {            //  Property name 
      type: String,     //  type （ Required ）, The current types of acceptance include ：String, Number, Boolean, Object, Array, null（ Represents any type of ）
      value: ''     //  Property initial value （ Optional ）, If it is not specified, it will select one... According to the type 
    },
    //  Pop up picture 
    image: {
      type: String,
      value: ''
    },
    //  Pop-up content 
    content: {
      type: String,
      value: ''
    },
    //  Pop up cancel button text 
    btn_no: {
      type: String,
      value: ' Cancel '
    },
    //  Pop up confirmation button text 
    btn_ok: {
      type: String,
      value: ' determine '
    }
  },

  /**
   * Component initial data
   */
  data: {
    flag: true,
  },

  /**
   * Component methods
   */
  methods: {
    // Hide the bullet box 
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    // Display bullet frame 
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    *  Internal private methods recommend starting with a dash 
    * triggerEvent  Used to trigger events 
    */
    _error () {
      // Trigger cancel callback 
      this.triggerEvent("error")
    },
    _success () {
      // Trigger successful callback 
      this.triggerEvent("success");
    }
  }
})

{
  "component": true
}

/* components/popup/popup.wxss */
.popup {
  z-index: 9;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 20rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: rgba(250,250,250,1);
}

.popup-title {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid red;
}

.popup-con {
  margin: 36rpx 10rpx;
  text-align: center;
}

.popup-con image {
  width: 196rpx;
  height: 196rpx;
}

.popup-btn {
  display: flex;
  justify-content: space-around;
}

.popup-btn text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 106rpx;
  border-top: 2rpx solid #EDEDED;
}
.popup-btn .btn-no {
  border-right: 2rpx solid #EDEDED;
}

  <popup id='popup'
    image='../../images/organizer/application-success.png'
    content=' Successful application '
    btn_no=' Start the campaign now '
    btn_ok=' Become an authenticated user '
    bind:error="_error"
    bind:success="_success">
  </popup>

  onReady: function (options) {
    // get popup Components 
    this.popup = this.selectComponent("#popup");
  },

  showPopup() {
    this.popup.showPopup();
  },

  // Cancel event 
  _error() {
    console.log(' You click Cancel ');
    this.popup.hidePopup();
  },
  // Confirm event 
  _success() {
    console.log(' You click OK ');
    this.popup.hidePopup();
  },