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


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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
javascript jQuery插件练习
Dec 24 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
window.open()实现post传递参数
Mar 12 Javascript
js去字符串前后空格的实现方法
Feb 26 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
小程序登录/注册页面设计的实现代码
May 24 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封装的Twitter访问类实例
2015/07/18 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP CURL使用详解
2019/03/21 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python调用外部程序的实操步骤
2019/03/04 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python 实现按对象传值
2019/12/26 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
表彰先进的通报
2014/01/31 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
硕士学位论文评语
2014/12/31 职场文书
辩护意见书
2015/06/04 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
导游词之山海关
2019/12/10 职场文书
python小型的音频操作库mp3Play
2022/04/24 Python