微信小程序自定义模态框_javascript技巧_

弹窗                                            恭喜你，成功加入班级                确定                

/**index.wxss**/     .show-btn {         margin-top: 100rpx;         color: #22cc22;     }       .modal-mask {         width: 100%;         height: 100%;         position: fixed;         top: 0;         left: 0;         background: #000;         opacity: 0.5;         overflow: hidden;         z-index: 9000;         color: #fff;     }       .modal-dialog {         width: 540rpx;         overflow: hidden;         position: fixed;         top: 50%;         left: 0;         z-index: 9999;         background: #f9f9f9;         margin: -180rpx 105rpx;         border-radius: 8px;     }       .modal-title {         padding-top: 30rpx;         padding-bottom: 30rpx;         font-size: 14px;         color: #030303;         text-align: center;     }       .modal-img {         width: 40px;         height: 40px;         margin: 0 auto;         margin-top: 20rpx;           image {             width: 100%;             height: 100%;         }     }         .modal-footer {         display: flex;         flex-direction: row;         height: 86rpx;         border-top: 1px solid #dedede;         font-size: 34rpx;         line-height: 86rpx;     }       .btn-cancel {         width: 50%;         color: #8f8f8f;         background-color: #f2f2f2;         text-align: center;         border-right: 1px solid #dedede;     }       .btn-confirm {         width: 50%;         color: #8f8f8f;         background-color: #f2f2f2;         text-align: center;     }       .btn-confirms {         width: 100%;         background-color: #f2f2f2;         color: #8f8f8f;         text-align: center;     }

var app = getApp() Page({   data: {     showModal: false,     // 成功     ses:true,   },   onLoad: function () {},   /**    * 弹窗    */     showDialogBtn: function () {     this.setData({       showModal: true     })   },   /**    * 弹出框蒙层截断touchmove事件    */   preventTouchMove: function () {},   /**    * 隐藏模态对话框    */   hideModal: function () {     this.setData({       showModal: false     });   },   /**    * 对话框取消按钮点击事件    */   onCancel: function () {     this.hideModal();   },   /**    * 对话框确认按钮点击事件    */   onConfirm: function (e) {     console.log(e.currentTarget.dataset.name);     this.hideModal();   } })