微信小程序自定义纯净模态框(弹出框)的实例代码


Posted in Javascript onMarch 09, 2020

由于官方API提供的模态框只能显示简单的文字,但是在实际应用场景中,我们需要模态框上能够显示各种各样的组件和样式,所以,以此为基础模拟出一套可以供大家自定义的纯净版的模态框,满足大家各式各样的需求。
效果图:

微信小程序自定义纯净模态框(弹出框)的实例代码

WXML:

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{!showModal}}"></view>
<view class="modal-dialog" hidden="{{!showModal}}">
 这一块区域为弹出框内容区域,根据自己的业务进行自定义布局
</view>

WXSS:

/* 模态框 */
 
.modal-mask {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
 z-index: 9000;
}
 
.modal-dialog {
 box-sizing:border-box;
 width: 85%;
 padding:30rpx;
 overflow: hidden;
 position: fixed;
 top: 20%;
 left: 0;
 right: 0;
 margin: 0 auto;
 z-index: 9999;
 background: white;
 border-radius: 5rpx;
}

JS:

data: {
 showModal: false, //false关闭模态框 true开启模态框
 },
 /**
 * 弹出框蒙层截断touchmove事件
 */
 preventTouchMove: function () {
 },
 /**
 * 隐藏模态对话框
 */
 hideModal() {
 var that = this;
 that.setData({
  showModal: false,
 })
 },

开启模态框,只需要在标签上绑定一个事件,将data里的showModal置为true即可。

此为最纯净的版本,个人经常使用,遂发出来,希望能够加快大家的开发效率。

到此这篇关于微信小程序自定义纯净模态框(弹出框)的实例代码的文章就介绍到这了,更多相关微信小程序自定义 模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
Aug 07 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
前端深入理解Typescript泛型概念
Mar 09 #Javascript
js实现无缝轮播图效果
Mar 09 #Javascript
js实现无缝轮播图
Mar 09 #Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 #Javascript
原生js实现瀑布流效果
Mar 09 #Javascript
原生JS实现贪吃蛇小游戏
Mar 09 #Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
js实现随机抽奖
2020/03/19 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
TensorFlow变量管理详解
2018/03/10 Python
Python自定义一个异常类的方法
2019/06/27 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
python 6种方法实现单例模式
2020/12/15 Python
python基于opencv实现人脸识别
2021/01/04 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
八年级历史教学反思
2014/01/10 职场文书
学生安全责任书模板
2014/07/25 职场文书