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

2018-11-01 40 焕想

本文实例为大家分享了微信小程序实现蒙版弹窗效果的具体代码,供大家参考,具体内容如下

<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文章

imgAreaSelect 中文文档帮助说明
Oct 08 34
node.js下when.js 的异步编程实践
Dec 03 47
javascript基于prototype实现类似OOP继承的方法
Dec 16 46
浅谈Sticky组件的改进实现
Mar 22 47
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 55
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 39
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 43
手机访问当前页面