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

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

本篇文章介绍了关于微信小程序自定义弹框展示的具体代码，下面将进行详细介绍：

展示代码

下面是展示代码，包含wxml、js、wxss部分：

<!-- 取消订单按钮 -->
<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;
}
/* 弹出层里面的按钮 */
.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;
}

以上就是关于微信小程序自定义弹框展示的具体代码，欢迎大家关注更多精彩内容。