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

 效果

代码

wxml

<view class="popup-container" wx:if="{{showPopup}}">
  <view class="popup-content">
    
    <text>这是一个右侧弹窗text>
  view>
view>
<view class="popup-mask"  wx:if="{{showPopup}}" bindtap="hidePopup">view>
<button bindtap="showPopup">显示弹窗button>

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
    });
  }
});