微信小程序确定窗口

先上效果图

 

wxml

<!-- 确定窗口 -->
<view class="hidden" hidden='{{!ifName}}'>
  <view class="toast_bg"></view>
  <view class="showToast">
    <text>选择课时</text>
    <view class="toast_input">
      <input placeholder="输入课时" type="idcard" placeholder-style='font-size:28rpx;' value="{{classNumber}}" bindinput="classInfo"></input>
    </view>
    <view>
      <picker mode="date" value='{{valueText}}' bindchange="changeValue" end="{{end}}" start="{{start}}">
        <view class="toast_inputdate">
          <input placeholder="选择时间" disabled="{{true}}" name="birthDay" value="{{birthDay}}" placeholder-style='font-size:28rpx;'></input>
        </view>
      </picker>
    </view>
    <view class="etc_info">
      <textarea class="etc_content" fixed="{{true}}" placeholder="备注" bindinput="etcInfo" placeholder-style='font-size:28rpx;' value="{{etcValue}}"></textarea>
    </view>
    <view class="toast_footer">
      <view class="cancel" bind:tap='cancel'>取消</view>
      <view class="certain" bind:tap="confirm">确定</view>
    </view>
  </view>
</view>

wxss

.toast-box {
  width   : 100%;
  height  : 100%;
  opacity : 1;
  position: fixed;
  top     : 0px;
  left    : 0px;
}

.toastbg {
  opacity         : 0.2;
  background-color: black;
  position        : fixed;
  width           : 100%;
  min-height      : 100vh;
}

.hidden {
  width          : 100%;
  height         : 100vh;
  display        : flex;
  justify-content: center;
}

.showToast {
  position      : fixed;
  z-index       : 2;
  width         : 610rpx;
  background    : #FFFFFF !important;
  border-radius : 14rpx;
  top           : 25%;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.showToast>text {
  height     : 30rpx;
  font-size  : 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color      : rgba(0, 0, 0, 1);
  margin-top : 53rpx;
}

.toast_input {
  margin-top   : 56rpx;
  width        : 550rpx;
  height       : 88rpx;
  background   : rgba(250, 250, 250, 1);
  border-radius: 12rpx;
}

.toast_input>input {
  height     : 88rpx;
  margin-left: 30rpx;
}

.toast_time {
  margin-top : 20rpx;
  width      : 500rpx;
  height     : 88rpx;
  display    : flex;
  flex       : row;
  align-items: center;
}

.toast_time>text {
  width     : 183rpx;
  text-align: center;
}

.etc_info {
  margin-top   : 20rpx;
  height       : 137rpx;
  width        : 550rpx;
  border-radius: 12rpx;
  background   : rgba(250, 250, 250, 1);
}

.etc_content {
  padding-top: 20rpx;
  margin-top : 10rpx;
  margin-left: 30rpx;
  height     : 110rpx;
  width      : 480rpx;
  font-size  : 32rpx;
  font-family: PingFang SC;
  font-weight: 400;
  background : rgba(250, 250, 250, 1);
  color      : rgba(0, 0, 0, 1);
}

.toast_inputdate {
  margin-top   : 20rpx;
  width        : 550rpx;
  height       : 88rpx;
  background   : rgba(250, 250, 250, 1);
  border-radius: 12rpx;
}

.toast_inputdate>input {
  height     : 88rpx;
  margin-left: 30rpx;
}

.toast_footer {
  margin-top    : 40rpx;
  display       : flex;
  flex-direction: row;
  width         : 100%;
  height        : 119rpx;
  align-items   : center;
}

.cancel {
  width      : 50%;
  text-align : center;
  height        : 119rpx;
  line-height: 119rpx;
  font-size  : 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color      : rgba(153, 153, 153, 1);
  border: 1rpx solid rgba(221,221,221,1);


}

.certain{
  width: 50%;
  height        : 119rpx;
  line-height: 119rpx;
  text-align : center;
  font-size  : 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color      : rgba(235, 104, 54, 1);
  border-top:1rpx solid rgba(221,221,221,1);
}

.toast_bg {
  position        : fixed;
  z-index         : 2;
  background-color: black;
  opacity         : 0.2;
  width           : 100%;
  height          : 100vh;
}

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    datas:{},
    ifName: false,
    birthDay: String,
    etcValue: String,
    classNumber: Number,
    currentId: Number,
  },
  changeValue: function (e) {
    var value = e.detail.value;
    if (value) {
      this.setData({
        birthDay: value
      });
    }
  },
  bindChange: function (e) {
    const val = e.detail.value
    this.setData({
      year: this.data.years[val[0]],
      month: this.data.months[val[1]],
      day: this.data.days[val[2]]
    })
  },
  etcInfo(e) {
    const etcValue = e.detail.value
    this.data.etcValue = etcValue
    this.setData({
      etcValue: this.data.etcValue
    })
  },
  classInfo(e) {
    const classNumber = e.detail.value
    this.data.classNumber = classNumber
    this.setData({
      classNumber: this.data.classNumber
    })
  },
  select(e) {
    wx.redirectTo({
      url: '/pages/teachers/class_management/index',
    })
  },
  tipWindow(e) {
    // 方便之后签到传值
    const id = e.currentTarget.dataset.id
    this.setData({
      ifName: true,
      etcValue: '',
      birthDay: '',
      classNumber: '',
      id
    })
    console.log(id)
  },
  // 取消签到窗口
  cancel() {
    this.setData({
      ifName: false
    })
  },
  //  确认签到窗口并发送值到后台
  confirm() {
    this.setData({
      ifName: false
    })
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

js根据自己需要去写吧，css应该是有冗余代码 自己测试去改，蒙层需要的自己改透明度。小程序的input和textarea样式设置在电脑预览不生效实际的样式是正常的。