微信小程序自定义弹框展示

　　本篇文章主要为大家介绍关于微信小程序自定义弹框展示的具体代码，现在我们一起看下：

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

　　内容已讲述完毕，欢迎大家关注更多精彩内容。