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


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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
php后门URL的防范
2013/11/12 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Javascript中arguments对象详解
2014/10/22 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
Python实现的下载网页源码功能示例
2017/06/13 Python
深入理解Django的自定义过滤器
2017/10/17 Python
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
python2 与python3的print区别小结
2018/01/16 Python
Python实现的栈(Stack)
2018/01/26 Python
django中模板的html自动转意方法
2018/05/27 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
商场中秋节广播稿
2014/01/17 职场文书
信访工作经验交流材料
2014/05/23 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
初中重阳节活动总结
2015/05/05 职场文书
2015年林业工作总结
2015/05/14 职场文书
学校运动会通讯稿
2015/07/18 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书