本篇文章主要為大家介紹關于微信小程序自定義彈框展示的具體代碼，現在我們一起看下：

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

　　內容已講述完畢，歡迎大家關注更多精彩內容。