微信小程序如何实现自定义弹框效果？

本文共计778个文字，预计阅读时间需要4分钟。

原文示例为：

本文实例为大家分享了微信小程序自定义弹框效果的完整代码，供大家参考。具体内容如下+wxml+！--+取消订单按钮+--view class=cancelBtn bindtap=cancelOrder data-id={{item.id}} data-type={{type}} 取消订单+！--+

简化后为：

微信小程序自定义弹框代码示例，包括取消订单按钮：view class=cancelBtn bindtap=cancelOrder data-id={{item.id}} data-type={{type}} 取消订单

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

wxml

<!-- 取消订单按钮 --> <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view> <!-- 取消订单弹框 --> <view class="modalDlg-mask" wx:if="{{showModal}}"></view> <view class="modalDlg" wx:if="{{showModal}}">     <view class="page-body">         <form bindsubmit="submit">             <view class="modalDlg-title">                 <text>取消订单原因</text>             </view>             <view class="modalDlg-content">                 <view class="modalDlg-content-item">                     <radio-group bindchange="radioChange">                         <label class="weui-cell weui-check__label" wx:for="{{items}}" wx:key="index">                             <view class="weui-cell__hd">                                 <radio value="{{item.value}}" color="#ff5155" />                             </view>                             <view wx:if="{{item.value!=='3'}}" class="weui-cell__bd">{{item.name}}</view>                             <text wx:if="{{item.value==='3'}}" style="width:150rpx;">{{item.name}}</text>                             <textarea wx:if="{{item.value==='3'}}" bindinput="bindTextArea" auto-height="true" placeholder="请输入其他原因"></textarea>                         </label>                     </radio-group>                 </view>             </view>             <view class="modalDlg-footer">                 <view bindtap="closeModal" class="modalDlg-btn closeBtn">取消</view>                 <view bindtap="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn">确定</view>             </view>         </form>     </view> </view>

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

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