微信小程序：自定义弹框

rszs

已于 2024-09-12 02:49:33 修改

阅读量192

点赞数 6

分类专栏：小程序文章标签：微信小程序小程序

于 2024-09-12 02:46:43 首次发布

本文链接：https://blog.csdn.net/qq_44467651/article/details/142154443

版权

小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

不说废话，直接上代码 `代码片`.

.wxml：

   <!-- 自定义弹框-->
    <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
    <view class="modalDlg" wx:if="{{showModal}}">
    <view style="padding:5%;width:100%;height:100%">
        <view class="title">提示</view>
        <view style="padding:30rpx;word-wrap: break-word;font-size: 30rpx;">
          {{content}}
        </view>
    </view>
    <view   class="modalBtnBox">
      <view class="modalBtnCommon modalBtnL" bindtap="cancel">取消</view>
      <view class="modalBtnCommon modalBtnR" bindtap="enter">{{btnText}}</view>
    </view>
    </view>

.wxss：

/* 自定义弹框 */
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
}

.modalDlg{
  width: 600rpx;
  height: 450rpx;
  position: fixed;
  top:50%;
  left: 50%;
  z-index: 9999;
  transform: translate(-50%,-50%);
  background-color: #fff;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modalDlg .title{
  text-align: center;
  font-size: 45rpx;
  font-weight: bold;
}
.modalBtnCommon{
  width: 50%;
  background-color: white;
  text-align: center;
  line-height: 100rpx;
  font-size: 35rpx;
  border-top: 1px solid rgba(168, 161, 161, 0.5);
}
.modalBtnBox{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height:150rpx;
}
.modalBtnL{
  border-bottom-left-radius: 30rpx;
}
.modalBtnR{
  color: #576B95;
  border-left:1px solid rgba(168, 161, 161, 0.5);
  border-bottom-right-radius: 30rpx;
}

.js：

// 自定义弹框
enter: function() {
  this.setData({
    showModal: false
  })
},

preventTouchMove: function() {

},
cancel: function() { 
  this.setData({
  showModal: false
  })
 }