微信小程序自定义弹框效果

本文实例为大家分享了微信小程序自定义弹框效果的具体代码，供大家参考，具体内容如下

wxml

取消订单




    
        

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

js 

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

wxss

/* 取消订单弹框 */
.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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。