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


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 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
js完美的div拖拽实例代码
Jan 22 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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判断是否有Get参数的方法
2014/05/05 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
php实现的顺序线性表示例
2019/05/04 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
javascript中对对层的控制
2006/12/29 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
在Django中创建第一个静态视图
2015/07/15 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
numpy库reshape用法详解
2020/04/19 Python
python安装sklearn模块的方法详解
2020/11/28 Python
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
给医务人员表扬信
2014/01/12 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers