微信小程序开发实现消息框弹出

<view class="tips-wrapper" wx:if="{{showTips}}">
  <view class="tips-content">
    <text class="tips-text">{{tipText}}</text>
  </view>
  <view class="tips-btns">
    <button class="tips-btn tips-btn-cancel" bindtap="cancelTips">取消</button>
    <button class="tips-btn tips-btn-confirm" bindtap="confirmTips">确定</button>
  </view>
</view>

.tips-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.tips-wrapper.show {
  opacity: 1;
  transform: scale(1);
}

// 弹出消息框
showTips: function() {
  const animation = wx.createAnimation({
    duration: 300,
    timingFunction: 'ease-in-out'
  })
  animation.opacity(1).scale(1).step()
  this.setData({
    showTips: true,
    animationData: animation.export()
  })
}

// 隐藏消息框
hideTips: function() {
  const animation = wx.createAnimation({
    duration: 300,
    timingFunction: 'ease-in-out'
  })
  animation.opacity(0).scale(0).step()
  this.setData({
    showTips: false,
    animationData: animation.export()
  })
}

// 取消按钮
cancelTips: function() {
  this.hideTips()
}

// 确认按钮
confirmTips: function() {
  this.hideTips()
}

<button class="btn" bindtap="showTips">显示消息框</button>

<button class="tips-btn tips-btn-cancel" bindtap="cancelTips">取消</button>
<button class="tips-btn tips-btn-confirm" bindtap="confirmTips">确定</button>