微信小程序实现蒙版弹窗效果


Posted in Javascript onNovember 01, 2018

本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下

<view class="modalDlg" wx:if="{{showModal}}">
 <view class='close_mask' bindtap="close_mask">X</view>
 <input class='recharge_amount' type='text' placeholder='充值金额' maxlength="8" value='{{recharge_amount}}'></input>
 <button class='save_money' type='submit'>立即充值</button>
</view>
 <button class='recharge' bindtap="submit">充值</button>
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

js:

// 点击充值弹窗
 submit: function () {
 this.setData({
 showModal: true
 })
 },
 preventTouchMove: function () {
 
 },
 
 
 close_mask: function () {
 this.setData({
 showModal: false
 })
 },

CSS:

/* 点击充值弹窗 */
 
.mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}
 
.modalDlg {
 width: 580rpx;
 height: 450rpx;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 margin: -370rpx 85rpx;
 background-color: #fff;
 border-radius: 36rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.recharge_amount {
 color: #aaa;
 width: 450rpx;
 height: 80rpx;
 background: #f1f1f1;
 text-align: center;
 border-radius: 12rpx;
 margin-top: 56rpx;
 text-indent: 0;
}
 
.save_money {
 color: #fff;
 width: 270rpx;
 height: 80rpx;
 line-height: 80rpx;
 background: #d95155;
 text-align: center;
 border-radius: 12rpx;
 margin-top: 80rpx;
 font-size: 28rpx;
 text-indent: 0em;
}
 
.close_mask {
 color: #000;
 position: relative;
 left: 40%;
 /* top: -82%; */
 font-size: 32rpx;
}
 
/*弹窗结束 */

效果图:

微信小程序实现蒙版弹窗效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript深入理解js闭包
Jul 03 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
Oct 04 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jquery自定义表格样式
Nov 23 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
详解javascript函数写法大全
Mar 25 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
You might like
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
ThinkPHP3.1新特性之对Ajax的支持更加完善
2014/06/19 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
详细讲解vue2+vuex+axios
2017/05/27 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
vue 实现axios拦截、页面跳转和token 验证
2018/07/17 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python list操作用法总结
2015/11/10 Python
浅析python函数式编程
2020/09/26 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
在校生党员自我评价
2013/09/25 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
优秀员工自荐书
2015/03/06 职场文书
家装电话营销开场白
2015/05/29 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python