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


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 相关文章推荐
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
手机号码,密码正则验证
Sep 04 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 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-fpm的两种进程管理模式详解
2013/06/03 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
详解vue路由
2020/08/05 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python实现二分查找算法
2020/09/18 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
企业厂长岗位职责
2013/12/17 职场文书
大学毕业感言50字
2014/02/07 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
交通安全教育心得体会
2016/01/15 职场文书