微信小程序实现漂亮的弹窗效果


Posted in Javascript onMay 26, 2020

最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西……
场面一度十分尴尬
可是得做啊,要不然产品大姐又要暴走了……
好吧,来研究一下模态对话框的性质自己DIY吧~

实现思路

模态对话框之所以被叫做“模态”,就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的。
那么这样一来,我们的思路就很明确了:

1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件;
2. 构建一个对话框,在需要时弹出即可(弹出同时触发蒙层)。

示例代码

.wxml:

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
 <image src="/figures/logo-smile.png"/>
 <text>欢迎来到模态对话框~</text>
 <button bindtap="go">点我可以关掉对话框</button>
</view>

<button bindtap="submit">点我弹窗</button>

.wxss:

.mask{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}

.modalDlg{
 width: 580rpx;
 height: 620rpx;
 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;
}

.js:

Page({

 data: {
  showModal: false
 },

 submit: function() {
  this.setData({
  showModal: true
  })
 },

 preventTouchMove: function() {

 },


 go: function() { 
  this.setData({
  showModal: false
  })
 }

})

需要注意的地方

  1. 蒙层view中绑定的preventTouchMove函数是一个空函数,使用了catch事件,目的就是阻止touchmove这样一个冒泡事件继续向下传递。
  2. 蒙层的wxss样式中,指定其大小为100%以占满整个屏幕。
  3. 模态对话框与蒙层的wxss样式中均有z-index属性,为的是保证对话框始终浮在蒙层的上方(即对话框的z-index始终要比蒙层的大)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
js实现动态显示时间效果
Mar 06 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
angularjs实现简单的购物车功能
Sep 21 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
Angular通过指令动态添加组件问题
Jul 09 #Javascript
js实现左右两侧浮动广告
Jul 09 #Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 #Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 #Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 #Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 #Javascript
vue-cli配置环境变量的方法
Jul 09 #Javascript
You might like
php把session写入数据库示例
2014/02/26 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JQuery简单实现锚点链接的平滑滚动
2015/05/03 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
中学自我评价
2014/01/31 职场文书
促销活动计划书
2014/05/02 职场文书
大专生自荐书范文
2014/06/22 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
永不妥协观后感
2015/06/10 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js