小程序弹出模态框（可输入文字）

---

前言

其实小程序实现模态框实现其实比较繁琐也不太方便,以下给大家分享一个自己做过一些小案例

---

一、如何使用？

基于小程序自带的一些组件
下面是我调试之后的样式和代码希望对你有所帮助

二、wxml

1.wxml

代码如下：

   <button class="show-btn" bindtap="showDialogBtn">今日体重</button>

          <!--弹窗-->

          <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

          <view class="modal-dialog" wx:if="{{showModal}}">

            <view class="modal-content">
              <view class="modal-input">
                <form  catchsubmit="formSubmit" catchreset="formReset">
                  <input focus="auto" placeholder-class="input-holder" type="number" name="tizhong" maxlength="10" bindinput="inputChange"
                    class="input"fou placeholder="请输入体重"></input>
                    <button class="btn-confirm" bindtap="onConfirm" data-status="confirm" formType="submit" size="mini">确定</button>
                </form>
              </view>
            </view>
          </view>
        </view>

2.js

代码如下：

formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

2.wxss

.show-btn {

  margin-top: 100rpx;

  color: #22cc22;

}

.modal-mask {

  width: 100%;

  height: 100%;

  position: fixed;

  top: 0;

  left: 0;

  background: #000;

  opacity: 0.5;

  overflow: hidden;

  z-index: 9000;

  color: #fff;

}

.modal-dialog {

  width: 540rpx;

  overflow: hidden;

  position: fixed;

  top: 50%;

  left: 0;

  z-index: 9999;

  background: #fff;

  margin: -180rpx 105rpx;

  border-radius: 36rpx;

}

.modal-title {

  padding-top: 50rpx;

  font-size: 36rpx;

  color: #030303;

  text-align: center;

}

.modal-content {

  padding: 50rpx 32rpx;

}

.modal-input {

  display: flex;

  background: #fff;

  border-bottom: 2rpx solid #ddd;

  border-radius: 4rpx;

  font-size: 28rpx;

}

.input {

  width: 100%;

  height: 82rpx;

  font-size: 28rpx;

  line-height: 28rpx;

  padding: 0 20rpx;

  box-sizing: border-box;

  color: #333;

}

input-holder {

  color: #666;

  font-size: 28rpx;

}

.modal-footer {

  display: flex;

  flex-direction: row;

  height: 86rpx;

  border-top: 1px solid #dedede;

  font-size: 34rpx;

  line-height: 86rpx;

}

.btn-cancel {

  width: 50%;

  color: #666;

  text-align: center;

  border-right: 1px solid #dedede;

}

.btn-confirm {

  width: 50%;

  color: #ec5300;

  text-align: center;

}