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


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 动画弹出窗体支持多种展现方式
Apr 29 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
浅析javascript的return语句
Dec 15 Javascript
javascript基本算法汇总
Mar 09 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS实现标签页切换效果
May 04 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
基于php判断客户端类型
2016/10/14 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python分支结构(switch)操作简介
2018/01/17 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
法国在线药房:1001Pharmacies
2021/03/07 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
高三自我评价
2014/02/01 职场文书
老干部工作先进事迹
2014/08/17 职场文书
领导干部保密承诺书
2014/08/30 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
高中物理教学反思
2016/02/19 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server