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


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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
vue 页面跳转的实现方式
Jan 12 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
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
js查错流程归纳
2012/05/04 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
理解JS绑定事件
2016/01/19 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python list转置和前后反转的例子
2019/08/26 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
建房协议书
2014/04/11 职场文书
小学评语大全
2014/04/22 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
小学班长竞选稿
2015/11/20 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS