免费刷金币,请点击这里
TE社区 > 前端技术
客服QQ:1206116161

微信小程序 弹框和模态框实现代码

39580371 于 2018-05-23 16:00:03 创建话题
(2)
(0)
举报

微信小程序 弹框和模态框实现代码

实现效果图:

实现代码:             

 <view class="wxapp-modal" style="{{modal_style}}">
      <view class="content">
      </view>
     <view class="mask" bindtap="closeModal"></view>
    </view>
/*模态框*/
.wxapp-modal{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 left: 0px;
 z-index:999;
}
.wxapp-modal .content{
 width: 100%;
 bottom: 10px;
 text-align: center;
 position: absolute;
}
.wxapp-modal .content .header{
 margin: auto;
 width: 93%;
 height: 60px;
 line-height: 60px;
 text-align: center;
 background-color: #FFFFFF;
 position: relative;
 z-index:9999;
 border-top-left-radius: 8px;
 border-top-right-radius: 8px;
 border-bottom: 1px #eee solid;
}
.wxapp-modal .content .body{
 margin: auto;
 width: 93%;
 background-color: #FFFFFF;
 position: relative;
 z-index:9999;
 border-bottom-left-radius: 8px;
 border-bottom-right-radius: 8px;
 overflow: hidden;
}
.wxapp-modal .content .footer{
 margin: auto;
 width: 93%;
 height: 60px;
 line-height: 60px;
 background-color: #FFFFFF;
 position: relative;
 z-index: 9999;
 border-radius: 8px;
 margin-top: 10px;
 text-align: center;
}
.wxapp-modal .content .footer button{
 display: inline-block;
 width: 49%;
 height: 60px;
 line-height: 60px;
 background-color: #FFFFFF;
 margin-left: 0px;
}
.wxapp-modal .content .footer button:active{
 background-color: #eee;
}
.wxapp-modal .content .footer button::after{
 content:none;
}
.wxapp-modal .content .footer .cancel{
 color: #fa5b43;
 border-right: 1px #eee solid;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
 border-top-left-radius: 8px;
 border-bottom-left-radius: 8px;
}
.wxapp-modal .content .footer .confirm{
 color: #1ed3fa;
 border-top-left-radius: 0px;
 border-bottom-left-radius: 0px;
 border-top-right-radius: 8px;
 border-bottom-right-radius: 8px;
}
.wxapp-modal .mask{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0px;
 background-color:rgba(0,0,0,0.5);
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • fangdb
    - 2018年08月25日 (0)

    不错,  谢谢分享 

  • 您的昵称不少于八个字
    - 2018年07月14日 (0)

    谢谢分享,加油

扫码关注TE官方微博 扫码关注TE官方微博
jQuery数据缓存功能的实现思路及简单模拟 解决列高度自适应(相同)的五种方法 Javascript监视变量变化的方法 JavaScript开发人员的10个关键习惯小结 详解JavaScript函数绑定 jsonp原理及使用 基于Cookie使用过滤器实现客户每次访问只登录一次 js仿苹果iwatch外观的计时器代码分享 2则自己编写的jQuery特效分享 Tomcat+Jsp环境下的中文问题 js实现显示当前状态的导航效果代码 Oracle DBA常用语句第1_2页 Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解 .NET中读取Excel文件的数据及excelReader应用 js匿名函数作为函数参数详解 ASP.NET中TextBox使用Ajax控件显示日期不全的问题解决方法 RequireJS入门一之实现第一个例子 vue.js指令和组件详细介绍及实例 js onkeypress与onkeydown 事件区别详细说明 Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用 Symfony2使用Doctrine进行数据库查询方法实例总结 分享php邮件管理器源码 自增长键列统计信息的处理方法 python使用 HTMLTestRunner.py生成测试报告 js贪吃蛇网页版游戏特效代码分享(挑战十关) 详解JavaScript对W3C DOM模版的支持情况 python xml.etree.ElementTree遍历xml所有节点实例详解 使用vue.js编写蓝色拼图小游戏 javascript 动态设置已知select的option的value值的代码 ASP 快速执行动态网页 利用JS重写Cognos右键菜单的实现代码 php简单图像创建入门实例 JS实现字符串转日期并比较大小实例分析 python使用fcntl模块实现程序加锁功能示例 JS隐藏参数post传值实例 PHP中你可能忽略的性能优化利器:生成器 Jquery使用css方法改变样式实例 jQuery实现列表的全选功能 js中apply与call简单用法详解 JS判断字符串字节数并截取长度的方法 织梦DedeCMS在实现中英文导航功能方法步骤 针对iOS开发的一些Xcode使用技巧小结 jQuery EasyUI API 中文文档 - Dialog对话框 JavaScript中动态向表格添加数据 Redis教程(十):持久化详解 一不小心就做错的JS闭包面试题 css+filter实现简单的图片透明效果 Swift中闭包实战案例详解 PHP使用PDO操作数据库的乱码问题解决方法 MySql安装与使用图文教程【推荐】 PHP开发框架Laravel数据库操作方法总结 做web开发 先学JavaScript Android实现添加商品到购物车动画效果 angularjs实现时间轴效果的示例代码 完美解决JS文件页面加载时的阻塞问题 jquery 实现拖动文件上传加载进度条功能 vue 使用html2canvas将DOM转化为图片的方法 Javascript基础教程之for循环 jQuery多项选项卡的实现思路附样式及代码 iOS自定义UIScrollView的滚动条实例代码 Ubuntu桌面版蓝牙耳机在哪设置如何开启 基于vue-ssr的静态网站生成器VuePress 初体验 详解基于vue的移动web app页面缓存解决方案 oracle数据库导入导出命令使用方法 Ajax 入门之 GET 与 POST 的不同处详解 php检测文件编码的方法示例 jquery仿百度经验滑动切换浏览效果 ASP.NET中MultiView和View选项卡控件的使用方法 Codeigniter操作数据库表的优化写法总结 Laravel中服务提供者和门面模式的入门介绍 JS & JQuery 动态添加 select option 使用SWFUpload实现无刷新上传图片 手写个小组件(组件入门)asp版 docker实现导出、导入和数据搬迁 ASP.NET框架中的数据绑定概要与数据绑定表达式的使用 wordpress文章标题为空时其它内容代替的方法 javascript中Number的方法小结 DedeCMS 5.6升级DedeCMS5.7SP1 后台文档类目和发布人丢失不显示的解决方法 深入理解Python中装饰器的用法 windows下python安装paramiko模块和pycrypto模块(简单三步) javascript编程必备_JS语法字典第1_2页 操作系统与硬件虚拟化的关系 Python中循环引用(import)失败的解决方法 Python3.X 线程中信号量的使用方法示例 JS中mouseover和mouseout多次触发问题如何解决 删除PHP数组中头部、尾部、任意元素的实现代码 js模块加载方式浅析 js命名空间写法示例 谈谈Tempdb对SQL Server性能优化有何影响 JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 在CentOS 6.5上如何安装Screen?在CentOS 6.5上安装Screen的方法 SQLSERVERAGENT警告 事件 ID 312 js实现class样式的修改、添加及删除的方法 AngularJS Select(选择框)使用详解 前端开发必须知道的JS之原型和继承 使用js画图之正弦曲线 React Native实现进度条弹框的示例代码 使用D3.js制作图表详解 jQuery中判断对象是否存在的方法汇总 js实现图片无缝滚动特效 CSS中的导航栏和下拉菜单的实现 Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数) 查询表中某字段有重复记录个数的方法 javascript定义类和类的实现实例详解 10款非常有用的 Ajax 插件分享 Javascript中的Callback方法浅析 浅谈Python2.6和Python3.0中八进制数字表示的区别 Lua教程(三) 值与类型介绍 Linux系统中的ps进程查看命令使用实例集锦 Python用for循环实现九九乘法表 Python爬虫实现抓取京东店铺信息及下载图片功能示例 php连接Access数据库错误及解决方法 jquery each()源代码 Java基于分治算法实现的线性时间选择操作示例 jQuery删除一个元素后淡出效果展示删除过程的方法 盒子边框border的三要素:宽_形状_颜色 一个简单的linux命令 cat 详解Linux系统中配置静态路由的方法 Linux计划任务Crontab学习笔记(3):配置文件 JavaScript 直接操作本地文件的实现代码 node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用 php实现删除指定目录下相关文件的方法 Android通话默认打开扬声器的方法 解决Oracle批量修改问题 python读取LMDB中图像的方法 检查上传图片是否合法的函数,木马改后缀名、图片加恶意代码均逃不过 JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】 jQuery Dom元素操作技巧 Textarea输入字数限制实例(兼容iOS&安卓) Python编程之Re模块下的函数介绍 双系统启动问题 cannot find grldr in all devices 解决指南 以HTML网页实例说明head区代码的意思 android获取手指触摸位置的方法 java实现多个文件压缩成压缩包 提高jQuery性能优化的技巧 mysql drop database删除数据库命令实例讲解 JS连接SQL数据库与ACCESS数据库的方法实例 PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能) JavaScript正则表达式校验与递归函数实际应用实例解析 Shell执行_调用Java_Jar程序例子的实例详解 shell脚本编程之循环语句学习笔记 python的构建工具setup.py的方法使用示例 jQuery fadeOut 异步实例代码详解 简介JavaScript中POSITIVE_INFINITY值的使用 Dedecms频道,列表页,内容页中调用全站最新文章的方法 用正则表达式来判断素数的代码 asp.net后台动态添加JS文件和css文件的引用实现方法 php实现简单的MVC框架实例 thinkPHP统计排行与分页显示功能示例 教你如何开启shopnc b2b2c 伪静态 MySQL命令行导出导入数据库实例详解 浅谈Ajax跨域Session和跨域访问 Fine Uploader文件上传组件应用介绍 jQuery插件zTree实现删除树子节点的方法示例 JavaScript 中的replace方法说明 python实现爬取图书封面 windows下Nginx多域名简单配置教程 css3实现针线缝合效果(图解步骤) 详解ASP.NET验证码的生成方法 php+mysqli数据库连接的两种方式 PHP中opcode缓存简单用法分析 JavaScript的继承实现小结 全面了解javascript三元运算符 php开启openssl的方法 CSS3模拟动画下拉菜单效果 Angular的Bootstrap(引导)和Compiler(编译)机制 网站设计之合理架构CSS js实现最短的XML格式化工具实例 浅谈CSS过渡、动画和变换 js实现的类似于asp数据字典的数据类型代码实例 Jquery插件编写简明教程 JS触摸与手势事件详解 Express之托管静态文件的方法 基于Bootstrap里面的Button dropdown打造自定义select jQuery实现列表内容的动态载入特效 Python实现判断一个字符串是否包含子串的方法总结 asp.net mvc路由篇 如何找到 IHttpHandler方法介绍 基于socket.io和node.js搭建即时通信系统 js canvas实现QQ拨打电话特效 ES6正则表达式的一些新功能总结 DIV 居中的绝好解决方法 jquery下利用jsonp跨域访问实现方法 JS控制层作圆周运动的方法 浅谈ctrl+c,ctrl+d,ctrl+z在linux中的意义 详解优化iOS程序性能的25个方法 kernel-headers-2.2.1-4 jquery网页加载进度条的实现 python生成excel的实例代码 linux下python抓屏实现方法 jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法) python通过定义一个类实例作为ftp回调方法 python多进程操作实例 jQuery动画效果图片轮播特效 AJAX 简介及入门实例 mysql中的limit用法有哪些(推荐) 关于JavaScript对象的动态选择及遍历对象 Java Web实现的基本MVC实例分析 JS截取字符串常用方法详细整理 javascript void(0)的真正含义实例分析 CentOS7安装使用Docker的步骤
struts2+hibernate+Spring后台表格分页 jQuery生成二维码插件.zip oracle11g 驱动jar包 后台管理网站css模板 黑色骑士html5模板.zip PJBlog2 完美的骑士.zip 设计画廊CSS3网页模板.zip 微信小程序 - 开心消消乐.zip Mac苹果CSS用户登录模板.zip jq全屏大背景幻灯片.zip 鼠标划入竖向伸展jQuery焦点图.zip 微信小程序源码-我的商城 JS产品图片局部放大代码.zip CSS3旋转图标标签.zip 仿微信6.0 UI界面 jElevator jQuery导航插件.zip 【PHP源码】阿波罗DJ程序 5.1 美化简洁版_abl_dj.zip 【ASP.NET源码】E7联盟企业网系统 v2.0修正版_sc_web.zip 蓝颜色商务HTML网页模板.zip jQuery带数字按钮焦点图.zip 儿童乐园Wordpress主题下载.zip jquery带对话框提示图片相册.zip css3冬天雪花飘落动画特效.zip jQuery类似窗帘左右拉开动画特效.zip 浅蓝风格CSS建站模板.zip html5 3d宽屏幻灯片代码.zip jQuery五星级评分代码.zip jquery hover图片遮罩层滑动.zip xml格式数据和json相互转换的源码 jQuery鼠标悬停显示文字效果代码.zip jQuery窗口顶部消息通知代码.zip 响应式旅游度假HTML5模板.zip jQuery&CSS3导航标签切换效果.zip 微信小程序 - 实时巴士带后端.zip jQuery安卓发展史时间轴代码.zip jQuery鼠标移动图片遮罩显示特效.zip 漂亮宽屏旅游企业网站模板.zip 【PHP源码】php ajax 域名查询_domainsearch.zip html5企业年会数字抽奖源代码.zip jQuery+CSS3仿IOS5通知中心.zip 3屏jQuery通栏banner代码.zip 【PHP源码】PigFace BLOG v0.91_pigfaceblog.zip jQuery分页图片切换插件jPages.zip 【ASP.NET源码】56WA手机电影下载系统源码_xtdy.zip jQuery产品筛选展示代码.zip 京探网jQuery五屏焦点图.zip jquery带按钮的图片滚动切换代码.zip 全面的validate.js实现无刷新验证 wp修改版KooPle主题.zip Java swing应用 蓝色商务企业网站模板.zip PSD婚纱相框模板下载.zip 模仿qqSwing界面多线程内嵌SpringHinerbate+获取天气WebService 百度APIStore天气预报APP java + ssh 的在线考试系统 手机端html5卡通场景动画效果.zip jquery矩形可拉伸导航.zip listview任意拖动排序 jQuery鼠标点击图片滑动切换特效.zip 【PHP源码】RunCms 2M1_runcms.zip jQuery页面顶部折角图片撕开效果.zip 弹出对话框层提示插件mh_dialog_v1 spring security包含数据库直接可以使用 简单jquery鼠标跟随左侧浮动菜单.zip 微信小程序 - 女性用品商城.zip jQuery+CSS3实现404背景动画特效.zip jQuery 360度全景图插件.zip 纯CSS3实现3D开机按钮.zip 【ASP.NET源码】UrlRewriter .NET v2.0 RC1 (For .Net2.0) 问沫工作室优化版_urlrewriter.net2.0_wm.zip jquery鼠标滑过预览大图.zip 基于servlet+jsp的学生信息录入查询系统 体育运动健身网站模板下载.zip jquery背景颜色悬停渐变.zip jQuery移动端幻灯片插件swipeslider.zip 有机蔬菜农场整站模板.zip jquery点击展开收缩垂直菜单代码.zip jQuery上下滚动banner广告代码.zip css3圆形修边按钮.zip HTML5实现简单进度条效果.zip CSS3实现圆形悬浮导航.zip 黑白搭配html网页模板.zip 五种切换效果的jQuery幻灯片.zip 微信小程序源码-自定义tabbar jQuery手机端左右滑动切换表单代码.zip jQuery Select下拉框美化特效.zip 网络世界html5网站模版.zip 微信小程序源码-仿tb模板 jQuery不同风格图片排列轮播切换.zip jQuery动画通知插件notifIt.zip jQuery问卷调查表单编辑代码.zip android 应用程序安装卸载(安装应用宝后自动弹出卸载应用宝) 韩国喜庆css模板下载.zip jQuery步骤进度条样式代码.zip CSS3绘制怪物表情动画特效.zip 微信小程序源码-零食商城 建筑工程企业html5模板.zip ssh租车管理系统 SSM框架【Spring+SpringMVC+MyBatis】 源码 微信小程序源码-企业版商城前端 ace管理台模板(bootstrap)含说明文档 监视器网页模板.zip jquery全屏背景图片切换效果.zip jQuery鼠标经过二级菜单渐隐效果.zip zepto手机端固定层图标导航菜单.zip css3动画原理制做的指针时钟.zip html5手机端信息筛选条件代码.zip Spark 1.X 大数据平台V2 视频教程清晰版 右侧8张缩略图jQuery图片轮播特效.zip jQuery底部自动填充瀑布流代码.zip jQuery带跳转滑动分页插件.zip 仿07073游戏网手机wap游戏网站模板.zip 隐藏到边缘的图片展示效果(jQuery).zip Java微博管理系统设计与实现课程设计改改可以成毕业时节 js列表图片拖拽排序代码.zip jQuery+HTML5加入购物车代码.zip 移动端LightBox幻灯片代码.zip jquery地图标记提示.zip 微信小程序源码-全国城市天气预报 响应式智能家居家居类企业网站织梦模板(自适应手机端).zip 爱搞机首页jQuery幻灯片代码.zip CSS3文字标题动画效果代码.zip CSS3实现兴趣图谱效果.zip SSH整合 全注解零配置 蓝色wap手机模板.zip jquery图片注释叠加效果.zip jQuery富文本编辑器Notebook.zip jquery网站Timeline时间轴.zip jquery鼠标经过图片抖动效果.zip jQuery网站通栏广告代码.zip jQuery液态式环形按钮菜单特效.zip jQuery马赛克过场图片轮换.zip 蓝色线条简洁网站模板.zip Java 版微信支付宝支付二合一模版Demo Discuz! MSN风格.zip 常见的tab切换Frgment jQuery仿百度登录窗口弹出层代码.zip jQuery鱼骨图形式信息展示代码.zip 【ASP.NET源码】51DjV舞曲现场视频分享平正式公测版(原dj-v)_51djv.zip 3D图片切片滑块旋转动画.zip 玉玺学生信息管理系统 jquery不规则随机切换焦点图.zip jQuery纵向手风琴滚动切换.zip 网站设计行业单页模板下载.zip jquery头部logo背景喷墨效果.zip jQuery液态式环形按钮菜单特效.zip Canvas跟随鼠标光标动画特效.zip 【PHP源码】站长爱好者链接源码_link.zip jQuery左侧大图右侧小图切换代码.zip SpringBoot整合SSM(含数据库),含有代码生成 java百度地图瓦片批量下载demo jQuery全屏背景图片导航菜单代码.zip Material Design风格内容幻灯片代码.zip 微信小程序 - 电商类小程序.zip 途牛旅游网CSS3动画特效.zip HTML5鼠标控制骑自行车速度动画.zip 烧烤店加盟网站模板.zip HTML5 Canvas推箱子小游戏源码.zip html5旅游酒店网站模板.zip jquery带播放按钮幻灯片.zip 好店8V3.2淘宝客程序API2.0接口(带文章系统)破解版.zip jQuery图像菜单特效.zip 微信小程序源码-旅游类 【ASP.NET源码】ASP.NET高亮代码_synataxhighlighter.zip jQuery花瓣网毛玻璃模糊背景特效.zip 欧美灰色html商务模板.zip CSS3小球环形旋转Loading动画.zip 个人技能展示网页模板.zip jQuery+CSS3模拟键盘事件.zip jQuery美化Select下拉菜单插件.zip jQuery个人名片样式代码.zip js仿YOKA七日重头戏图片切换.zip gameEllio 酷酷滴游戏 猎豹浏览器4.0页面滑动jQuery.zip jQuery Select下拉框美化插件.zip 微信小程序源码-记录宝宝喂奶 墨蓝色设计案例展示模板.zip jquery变焦放大效果.zip 生态绿色CSS网页模板.zip 【PHP源码】PHP留言程序源代码版[BBWPS] V2.1_bbwps_guestbook.zip 【PHP源码】板蛋村留言本v2.0_bdcgbook20.zip jQuery手机键盘选择车牌号代码.zip 【PHP源码】思维(CMSware) v2.85 UTF-8繁体中文正式版 Build20070828 (PHP5)_cmsware_pro_2_8_5_20070828_php5_try_ut.zip 橙色大气设计html5模板.zip flash+xml焦点图轮换.zip 绿色大气PC网站模板.zip 绵羊动物养殖企业网站模板.zip 【PHP源码】Softbiz Image Gallery v1.0_softbizimage10.zip js抖动美女相册图片放大展示.zip jQuery带左右箭头图片放大切换.zip 设计绘画工作室HTML模板.zip jQuery可拖拽排序的列表代码.zip jquery邮票手风琴导航.zip CSS3鼠标悬停图片放大效果.zip 紫色博客CSS网页模板.zip 凌云新闻系统(LyNews)v1.0 可调节CSS3变形金刚特效.zip 网站左侧下拉菜单jQuery代码.zip MSN中国首页四屏切换新闻代码.zip 创意设计个人网站模板.zip js手写输入在线搜索.zip
举报X