1. <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : '' }}">
    2.   <!-- 如果想点击弹窗外不隐藏，取消bindtap点击事件即可 -->
    3.   <view class="zan-dialog__mask" bindtap="toggleDialog" />
    4.   <view class="zan-dialog__container">
    5.     <view style='padding:100rpx;'>此处是填充的布局代码</view>
    6.   </view>
    7. </view>
    1. .zan-dialog__mask {
    2.     position: fixed;
    3.     top: 0;
    4.     left: 0;
    5.     right: 0;
    6.     bottom: 0;
    7.     z-index: 10;
    8.     background: rgba(0, 0, 0, 0);   /*设置阴影半透明背景如： background: rgba(0, 0, 0, 0.4);*/
    9.     display: none;
    10.   }
    12.   .zan-dialog__container {
    13.     position: fixed;
    14.     bottom: 400rpx;
    15.     width: 650rpx;    /*弹窗布局宽*/
    16.     height: 350rpx;   /*弹窗布局高，与下面弹出距离transform有关*/
    17.     margin-left: 50rpx;
    18.     background: #f8f8f8;
    19.     transform: translateY(300%);  /*弹框弹出距离，与弹框布局高度有关，如300%表示弹起距离为3倍弹窗高度 */
    20.     transition: all 0.4s ease;
    21.     z-index: 12;
    22.     border-radius: 20rpx;
    23.     box-shadow: 0px 3px 3px 2px gainsboro;  /*弹框的悬浮阴影效果，如不需要可注释该行*/
    24.   }
    26.   .zan-dialog--show .zan-dialog__container {
    27.     transform: translateY(0);
    28.   }
    30.   .zan-dialog--show .zan-dialog__mask {
    31.     display: block;
    32.   }
    1. Page({
    2.   data: {
    3.     showDialog: false
    4.   },
    6.   /**
    7.   * 控制 pop 的打开关闭
    8.   * 该方法作用有2:
    9.   * 1：点击弹窗以外的位置可消失弹窗
    10.   * 2：用到弹出或者关闭弹窗的业务逻辑时都可调用
    11.   */
    12.   toggleDialog() {
    13.     this.setData({
    14.       showDialog: !this.data.showDialog
    15.     });
    17.   },