微信小程序实现蒙版弹出窗功能


Posted in Javascript onSeptember 17, 2019

微信小程序实现蒙版弹出窗功能

话不多说 上代码。

wxml:

<view class="page">

 <button bindtap="showMask"> 弹出 </button>
 <view catchtouchmove="preventTouchMove" class="alert-mask" wx:if="{{showModal}}"></view>
 <view class="modalDlg" wx:if="{{showModal}}">
  <view class="modelTitle">我是标题</view>
  <view class="modeContent">
   我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
  </view>
  <image class="hide-btn" bindtap="hideMask" src="./../images/tripDetailAlertHide.png"></image> 
 </view>
</view>

wxss:

/* 弹窗蒙版 start */
.alert-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}
.modalDlg {
 width: 80%;
 height: 55%;
 position: fixed;
 top: 45%;
 left: -1%;
 z-index: 9999;
 box-sizing: border-box;
 padding: 25rpx;
 margin: -370rpx 85rpx;
 background-color: #fff;
 border-radius: 18rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}
.modelTitle{
 font-size: 38rpx;
 margin-bottom: 20rpx;
}
.hide-btn {
 position: absolute;
 top: 10rpx;
 right: 10rpx;
 width: 50rpx;
 height: 50rpx;
}
/* 弹窗蒙版 end*/
js:

Page({
 data: {
  showModal: false
 },
 onLoad(o) {
 },
  showMask: function () {
  this.setData({
   showModal: true
  })
 },
 hideMask: function () {
  this.setData({
   showModal: false
  })
 },
})

总结

以上所述是小编给大家介绍的微信小程序实现蒙版弹出窗功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript数字时钟示例分享
Apr 23 Javascript
js验证上传图片的方法
May 12 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 #Javascript
ionic2.0双击返回键退出应用
Sep 17 #Javascript
三步实现ionic3点击退出app程序
Sep 17 #Javascript
ionic3双击返回退出应用的方法
Sep 17 #Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 #Javascript
vue.js购物车添加商品组件的方法
Sep 17 #Javascript
关于vue项目中搜索节流的实现代码
Sep 17 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php实现通过ftp上传文件
2015/06/19 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
详解JS预解析原理
2020/06/16 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中os.path用法分析
2015/01/15 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python执行使用shell命令方法分享
2017/11/08 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
招聘单位介绍信
2014/01/14 职场文书
国旗下的演讲稿
2014/05/08 职场文书
大一新生检讨书
2014/10/29 职场文书
医院见习报告范文
2014/11/03 职场文书
教代会开幕词
2015/01/28 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript