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


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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
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结合飞信 免费天气预报短信
2009/05/07 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
Python易忽视知识点小结
2015/05/25 Python
Django中Model的使用方法教程
2018/03/07 Python
Python 将pdf转成图片的方法
2018/04/23 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Python中logger日志模块详解
2020/08/04 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
九年级政治教学反思
2014/02/06 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
市场开发计划书
2014/05/07 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
慈善募捐倡议书
2015/04/27 职场文书
导游词之崇武古城
2019/10/07 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python实现简单石头剪刀布游戏
2021/10/24 Python
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技