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


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选择器的选择使用及性能介绍
Jan 16 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
Aug 28 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
srcElement表格样式
2006/09/03 Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
基于prototype扩展的JavaScript常用函数库
2010/11/30 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Vue2.x中的Render函数详解
2017/05/30 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
jQuery操作事件完整实例分析
2020/01/10 jQuery
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python基础教程之循环介绍
2014/08/29 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
Python 远程开关机的方法
2020/11/18 Python
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
我们的节日国庆活动方案
2014/08/19 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers