方法一:

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();
}

方法一样式修改麻烦,但是代码简单

微信小程序弹出可填写框两种方法的更多相关文章

  1. 微信小程序--跳转页面常用的两种方法

    一.bindtap="onProductsItemTap"绑定点击跳转事件 在.wxml文件中绑定 在.js文件中实现绑定事件函数 二.navigator标签配合URL跳转法 在w ...

  2. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  3. 微信小程序弹出层点击穿透问题

    问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...

  4. 微信小程序 - 弹出键盘遮挡住输入框

    在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...

  5. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  6. 微信小程序弹出层

    1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...

  7. 微信小程序弹出框滚动穿透问题

    1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...

  8. 微信小程序弹出层动画特效

    .rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...

  9. 微信小程序弹出和隐藏遮罩层动画以及五星评分

    参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...

随机推荐

  1. javaMail简介(一)

    一:开发javaMail用到的协议 SMTP(simple Message Transfer Protocal):简单消息传输协议.发送邮件时使用的协议,描述了数据该如何表示,默认端口为:25 POP ...

  2. day05-(validate&bootstred)

    网站分享: http://www.runoob.com/ 回顾: html:展示 文件 标签: <html> <head> <title></title> ...

  3. IDEA常用快捷键整理(Mac OS X版本)

    最近eclipse把我弄疯了!各种提示没有!烦,果断用了IDEA. 一.前提 IDEA版本:IntelliJ IDEA 15.0.3 Keymaps:Mac OS X 二.视图切换快捷键 1.cmd ...

  4. go logs

    安装导入 go get github.com/astaxie/beego/logs import "github.com/astaxie/beego/logs" 使用 packag ...

  5. Leetcode 137 Single Number II 仅出现一次的数字

    原题地址https://leetcode.com/problems/single-number-ii/ 题目描述Given an array of integers, every element ap ...

  6. HDU 1020(连续同字符统计 **)

    题意是要统计在一段字符串中连续相同的字符,不用再排序,相等但不连续的字符要分开输出,不用合在一起,之前用了桶排序的方法一直 wa,想复杂了. 代码如下: #include <bits/stdc+ ...

  7. HDU 6425(羽毛球组合 **)

    题意是说有四种同学,没有球拍没有球的( a ),只有球拍的( b ),只有球的( c ),既有球拍又有球的( d ):现在要去打羽毛球,每个人都可以选择去或者不去,问有多少种无法打羽毛球的情况. 无法 ...

  8. HDU 6345(子串查询 暴力)

    题意是每组给定一个字符串,在有限查询次数内输出所要查询区间的字典序最小的子串个数. 字典序最小的子串,就是所查询区间中字典序最小的单个字符,问题就转化成了求一段区间内字典序最小的字符个数. 开始时盲目 ...

  9. tomcat源码研究之源码导入eclipse

    版本:8.5.x官网:https://tomcat.apache.org/svn.html1. 下载源码,git镜像:https://github.com/apache/tomcat85 .2. 导入 ...

  10. vue 用checkbox 做多选,带选中样式

    <dl v-for="(item,index) in listData" :key="index"> testName <label> ...