微信小程序彈出可填寫框兩種方法

方法一：

html頁面： 

< view class = "container"
class = "zn-uploadimg" > < button type = "primary"
bindtap = "modalinput" > modal有輸入框 < /button> 
</view > < modal id = "modal"
hidden = "{{hiddenmodalput}}"
title = "預約信息"
confirm - text = "提交"
cancel - text = "取消"
bindcancel = "cancel"
bindconfirm = "confirm" > < input type = 'text'
placeholder = "姓名："
auto - focus / > < input type = 'number'
placeholder = "電話："
auto - focus / > < input type = 'text'
placeholder = "人數："
auto - focus / > < input type = 'text'
placeholder = "時間："
auto - focus / > < /modal>
    
js頁面：

/ / 獲取應用實例
var app = getApp()
Page({
    data: {
        hiddenmodalput: true,
        //可以通過hidden是否掩藏彈出框的屬性，來指定那個彈出框 
    },
    //點擊按鈕痰喘指定的hiddenmodalput彈出框 
    modalinput: function() {
        this.setData({
            hiddenmodalput: !this.data.hiddenmodalput
        })
    },
    //取消按鈕 
    cancel: function() {
        this.setData({
            hiddenmodalput: true
        });
    },
    //確認 
    confirm: function() {
        this.setData({
            hiddenmodalput: true
        })
    }
})

方法二：

html頁面： 

< 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-title" > 預約信息 < /view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="姓名"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="電話"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="人數"></input > < /view>
<view class="modal-input">
<input placeholder-class="input-holder" type="number" maxlength="10" bindinput="inputChange" class="input" placeholder="時間"></input > < /view>
</view > < view class = "modal-footer" > < view class = "btn-cancel"
bindtap = "onCancel"
data - status = "cancel" > 取消 < /view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">確定</view > < /view>
</view > 

css頁面：
/**index.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;
}

js頁面：
/**
 * 彈窗
 */
showDialogBtn: function() {
    this.setData({
        showModal: true
    })
},
/**
 * 彈出框蒙層截斷touchmove事件
 */
preventTouchMove: function() {},
/**
 * 隱藏模態對話框
 */
hideModal: function() {
    this.setData({
        showModal: false
    });
},
/**
 * 對話框取消按鈕點擊事件
 */
onCancel: function() {
    this.hideModal();
},
/**
 * 對話框確認按鈕點擊事件
 */
onConfirm: function() {
    wx.showToast({
        title: '提交成功',
        icon: 'success',
        duration: 2000
    })
    this.hideModal();
}

 

方法一樣式修改麻煩，但是代碼簡單