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


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的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
项目考察欢迎辞
2014/01/17 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Python 中面向接口编程
2022/05/20 Python