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


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 相关文章推荐
js控制表单不能输入空格的小例子
Nov 20 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
ThinkPHP令牌验证实例
2014/06/18 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery select操作控制方法小结
2010/05/26 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
英语专业毕业个人求职自荐信
2013/09/21 职场文书
技校生自我鉴定范文
2013/09/26 职场文书
客户表扬信范文
2014/01/10 职场文书
网页美工求职信
2014/02/15 职场文书
活动总结的格式
2014/05/07 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书