微信小程序自定义弹框效果_javascript技巧_

取消订单              
                              取消订单原因                                                                                                                                                                                                                 {{item.name}}                             {{item.name}}                                                                                                                                       取消                 确定                      
     

data:{ showModal: false, //取消订单弹框   } ,      //取消订单弹框   cancelOrder() {     this.setData({       showModal: true     })   },       //取消订单弹框-确定   confirmModal() {      this.setData({           showModal: false         });    },  //取消订单弹框-取消   closeModal() {           this.setData({       showModal: false     })     },

/* 取消订单弹框 */ .page-body {   width: 100%; }   /* 遮罩层 */ .modalDlg-mask {   width: 100%;   height: 100%;   position: fixed;   top: 0;   left: 0;   background: #000;   z-index: 9000;   opacity: 0.5; }   /* 弹出层 */ .modalDlg {   width: 70%;   position: fixed;   top: 25%;   left: 0;   right: 0;   z-index: 9999;   margin: 0 auto;   background-color: #fff;   border-radius: 5px;   display: flex;   flex-direction: column;   align-items: center; } .modalDlg-title{   width: 100%;   display: flex;   align-items: center;   justify-content: center;   padding: 20rpx 0rpx; }     .modalDlg-content {   width: 100%;   display: flex;   flex-direction: column;   justify-content: center;   padding: 10rpx 0; } .modalDlg-content .modalDlg-content-item{ display: flex; align-items: center; justify-content: space-between;  }    .modalDlg-content .modalDlg-content-item radio-group{    width: 100%;    color: #666;  }  .modalDlg-content .modalDlg-content-item .weui-check__label{ display: flex; align-items: center; } .modalDlg-content .modalDlg-content-item .weui-cell__bd{   line-height: 48rpx;   } .modalDlg-content .modalDlg-content-item .weui-cell{   padding: 20rpx;   display: flex;   flex-direction: row; }   .modalDlg-footer {   width: 100%;   height: 100rpx;   border-top: 1rpx solid #ededed;   display: flex;   align-items: center;   flex-wrap: nowrap;   justify-content: space-between; }    /* 弹出层里面的文字 */ .modalDlg .modalDlg-content text {   text-align: justify;   font-size: 28rpx;   color: #666;   /* margin-left: 10px; */ }   /* 弹出层里面的按钮 */ .modalDlg-btn {   width: 80px;   height: 70rpx;   line-height: 70rpx;   text-align: center;   font-size: 28rpx;   border-radius: 40rpx;   margin: 0 auto; }   .modalDlg .modalDlg-footer .closeBtn {   background: #fff;   color: #fc4141;   border: 1rpx solid #fc4141; }   .modalDlg .modalDlg-footer .confirmBtn {   background: #fc4141;   color: #fff; }