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


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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
js实现音乐播放控制条
Sep 09 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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中单引号与双引号的区别分析
2014/08/19 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
Angular4 Select选择改变事件的方法
2018/10/09 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
创业计划书怎样才能打动风投
2014/01/01 职场文书
温馨提示标语
2014/06/26 职场文书
教师听课评语大全
2014/12/31 职场文书
会计岗位职责范本
2015/04/02 职场文书
材料采购员岗位职责
2015/04/03 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis