微信小程序：点击按钮出现右侧弹窗

 效果

代码

wxml

  
    
    这是一个右侧弹窗
  




显示弹窗

wxss

.popup-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  background-color: #fff;
  z-index: 9999;
  border-bottom-left-radius: 15rpx;
  border-top-left-radius: 15rpx;
}

.popup-content {
  padding: 20rpx;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

js

Page({
  data: {
    showPopup: false
  },
  showPopup: function () {
    this.setData({
      showPopup: true
    });
  },
  hidePopup: function () {
    this.setData({
      showPopup: false
    });
  }
});