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


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扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
Ant Design的Table组件去除
Oct 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中的output_buffering详细介绍
2014/09/27 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
小程序实现留言板
2018/11/02 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
微博营销计划书
2014/01/10 职场文书
社区禁毒工作方案
2014/06/02 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
员工离职证明范本
2015/06/12 职场文书
2015年女工委工作总结
2015/07/27 职场文书