小程序弹出模态框(可输入文字)


前言

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


一、如何使用?

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

二、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;

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值