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


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 QueryString解析类代码
Jan 17 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 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函数
2006/10/09 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
python操作MySQL数据库具体方法
2013/10/28 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python Kmeans算法原理深入解析
2019/08/23 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python 列表反转显示的四种方法
2020/11/16 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
体育口号大全
2014/06/18 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
导游词之天津古文化街
2019/11/09 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js