前言
其实小程序实现模态框实现其实比较繁琐也不太方便,以下给大家分享一个自己做过一些小案例
一、如何使用?
基于小程序自带的一些组件
下面是我调试之后的样式和代码希望对你有所帮助
二、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;
}