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

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

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

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

实现效果图:

实现代码:             

 <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官方微博
详解Linux中输出文件内容的rev与tac命令使用 39位顶尖SEO专家谈网页排名 正则表达式教程之匹配一组字符详解 Python守护线程用法实例 详解vue 组件之间使用eventbus传值 Python计算程序运行时间的方法 Redis性能大幅提升之Batch批量读写详解 jsp 获取客户端的浏览器和操作系统信息 IPTABLES配置实例 OpenGL ES 矩阵变换及其数学原理详解(五) python+selenium开发环境搭建图文教程 JS添加或修改控件的样式(Class)实现方法 asp.net中EXCEL数据导入到数据库的方法 Vue+axios 实现http拦截及路由拦截实例 angularjs结合html5实现拖拽功能 javascript定义类和类的实现实例详解 ubuntu12.04卡死的解决方法(ubuntu查看内核以及升级内核的方法) 详解Android中实现Redux方法 HTML5移动端手机网站开发流程 easyui Draggable组件实现拖动效果 Android实现支付宝AR扫描动画效果 Javascript字符串常用方法详解 open 动态修改img的onclick事件示例代码 Python基于QRCode实现生成二维码的方法【下载,安装,调用等】 使用 Javascript 实现浏览器推送提醒功能的示例 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解 JS正则表达式比较常见用法 javascript实现自动输出文本(打字特效) Vue循环组件加validate多表单验证的实例 Oracle触发器trigger详解 Javascript学习笔记9 prototype封装继承 jquery插件treegrid树状表格的使用方法详解(.Net平台) 用Kotlin打造一个Router的示例代码 Android菜单的定义及ActionBar的实现 SQL Server页类型汇总+疑问汇总 jquery 得到当前页面高度和宽度的两个函数 DataGridView中CheckBox实现某一列单选 PHP高级编程实例:编写守护进程 JavaScript onkeypress事件入门实例(按下或按住一个键盘按键) 详谈Python基础之内置函数和递归 JavaScript中var关键字的使用详解 Python 如何访问外围作用域中的变量 Mac系统怎么创建智能邮箱? 开源软件包和环境管理系统Anaconda的安装使用 javascript判断是否按回车键并解决浏览器之间的差异 AngularJS基于factory创建自定义服务的方法详解 asp有效防止网站留言板出现垃圾留言_评论实现思路 Jquery实现无刷新DropDownList联动实现代码 详解Vue用自定义指令完成一个下拉菜单(select组件) 用CSS3打造HTML5的Logo(实现代码) html内容超出了div的宽度如何换行让内容自动换行 微信小程序应用号开发教程详解 JS实现不使用图片仿Windows右键菜单效果代码 jQuery 1.9.1源码分析系列(十五)之动画处理 ExtJS4 表格的嵌套 rowExpander应用 asp.net web页面元素的多语言化(多国语化)实现分享 js遍历添加栏目类添加css 再点击其它删除css【推荐】 Js冒泡事件详解及阻止示例 python利用requests库进行接口测试的方法详解 PHP自定义函数获取URL中一级域名的方法 PHPCMS通过getJSON调用的地址回调函数一直无法执行 从零开始学习jQuery (六) jquery中的AJAX使用 如何把DEDECMS采集文章变成“原创”的文章 简介JavaScript中的getUTCFullYear()方法的使用 phpstorm配置Xdebug进行调试PHP教程 多个jQuery版本共存的处理方案 9个比较实用的php代码片段 详解iOS开发中使用storyboard创建导航控制器的方法 javascript new 需不需要继续使用 当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖) Java代码编写的一般性指导 js编写当天简单日历效果【实现代码】 escape函数解决js中ajax传递中文出现乱码问题 vue v-model表单控件绑定详解 dedecms文章跳转属性打开后页面空白原因分析及解决 CSS media queries c# 执行事务函数代码 python发送HTTP请求的方法小结 react-native中ListView组件点击跳转的方法示例 浅谈nodeName,nodeValue,nodeType,typeof 的区别 python分割和拼接字符串 PHP html标签正则替换并可自定义正则规则 JQuery中如何传递参数如click(),change()等具体实现 Js-$.extend扩展方法使方法参数更灵活 编写线程安全的JSP程序 css基础教程之CSS基础语法 dedecms自动采集文章摘要教程 CSS3实现swap交换动画 详解WordPress中用于合成数组的wp_parse_args()函数 Angular ng-repeat 对象和数组遍历实例 asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法 php正则去除网页中所有的html,js,css,注释的实现方法 JavaScript数组深拷贝和浅拷贝的两种方法 Jquery实现图片预加载与延时加载的方法 JS 去除Array中的null值示例代码 jQuery实现左侧导航模块的显示与隐藏效果 div#sidebar{}与#sidebar div{}的区别介绍 JavaScript之DOM_动力节点Java学院整理 深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法) 使用canvas对多图片拼合并导出图片的方法 AngularJS中的promise用法分析 利用ROW_NUMBER() OVER函数给SQL数据库中每一条记录分配行号的方法 Ajax学习笔记整理 CI框架装载器Loader.php源码分析 Mysql 出现故障应用直接中断连接导致数据被锁(生产故障)详解 flex actionScript时间处理相加返回相加后的date Redis教程(十三):管线详解 Docker网络之单host网络及使用案例 JavaScript实现移动端轮播效果 CSS样式表渐进增强的应用 Jquery操作js数组及对象示例代码 python分析apache访问日志脚本分享 xhtml+css网页制作中常见问题解决方法 Python实现桶排序与快速排序算法结合应用示例 JavaScript 函数调用规则 js中的window.open返回object的错误的解决方法 利用PHP如何实现Socket服务器 Symfony2学习笔记之插件格式分析 网页编辑器FCKeditor 2.6.4精简配置方法 div结合css布局bbs首页(div+css布局入门) Windows下安装Redis及使用Python操作Redis的方法 微软的远程安全访问控制 Asp.net页面中调用soapheader进行验证的操作步骤 js的匿名函数使用介绍 Shell脚本实现从文件夹中递归复制文件 coolcode转SyntaxHighlighter与Mysql正则表达式实现分析 纯CSS实现红绿灯效果(面试常见) Android自定义ListView单击事件失效的解决方法 纯CSS绘制三角形(各种角度) ES6新特性之Object的变化分析 MySql中的IFNULL、NULLIF和ISNULL用法详解 Linux通过Shell脚本命令修改密码的两种方式 javascript中获取class的简单实现 Python实现将DOC文档转换为PDF的方法 js中的onchange和onpropertychange (onchange无效的解决方法) Javascript this 的一些学习总结 简单好用的nodejs 爬虫框架分享 Linux系统下修改用户密码全攻略 sql 取两值之间的数据方法(例:100-200之间的数据) jquery.combobox中文api和例子,修复了上面的小bug SQL Transcation的一些总结分享 JavaScript将取代AppleScript? Python实战小程序利用matplotlib模块画图代码分享 swagger上传文件并支持jwt认证的实现方法 OpenGL ES纹理详解 js_jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法 Mongodb实现的关联表查询功能【population方法】 如何在线查询本地机的文件? JS正则验证邮箱的格式详细介绍 JS页面延迟执行一些方法(整理) 在 Express 中使用模板引擎 使用window.prompt()实现弹出用户输入的对话框 JavaScript实现向右伸出的多级网页菜单效果 Mac QQ截图保存在哪里?苹果电脑Mac qq截图文件路径设置技巧图解 BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法 Jquery AutoComplete自动完成 的使用方法实例 详解Django 中是否使用时区的区别 Python内建函数之raw_input()与input()代码解析 python使用xlrd模块读写Excel文件的方法 Canvas引入跨域的图片导致toDataURL()报错的问题的解决 asp.net遍历目录文件夹和子目录所有文件 微信小程序 canvas API详解及实例代码 jQuery+ajax+asp.net获取Json值的方法 jquery实现左右滑动菜单效果代码 NodeJS创建最简单的HTTP服务器 flash+jQuery实现可关闭及重复播放的压顶广告 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作 vue实现点击选中,其他的不选中方法 jquery学习笔记 用jquery实现无刷新登录 JS获取浏览器版本及名称实现函数 CI框架整合smarty步骤详解 最新统计排名前十的SQL和NoSQL数据库排行榜 JQuery 获取json数据$.getJSON方法的实例代码 在Python中使用sort()方法进行排序的简单教程 解析php中die(),exit(),return的区别 Django的URLconf中使用缺省视图参数的方法 javascript基于prototype实现类似OOP继承的方法 AngularJS中的JSONP实例解析 在Django中使用Sitemap的方法讲解 python中如何正确使用正则表达式的详细模式(Verbose mode expression) CentOS 7下YUM 本地仓库的搭建详细步骤 如何在指定的地方插入html内容和文本内容 使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子 MySQL中执行计划explain命令示例详解 PHP中static关键字以及与self关键字的区别 jquery validate表单验证插件 mysql 触发器用法实例详解 asp.net+js 实现无刷新上传解析csv文件的代码 es6学习笔记之Async函数基本教程 JavaScript控制Session操作方法 asp(javascript)全角半角转换代码 dbc2sbc Python和C_C++交互的几种方法总结 canvas 弹幕效果(实例分享) WordPress主题制作中自定义头部的相关PHP函数解析 HTML静态页面引入公共html文件(ssi服务器端指令详解) PHP实现网站访问量计数器 通过Python使用saltstack生成服务器资产清单 js判断checkbox是否选中个数的方法(超简单) 详解基于angular-cli配置代理解决跨域请求问题 JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
学生信息管理系统(JSP+Servlet) 基于jQuery图片缩放tab切换效果.zip 高端HTML5响应式自适应企业通用类织梦模板 dedecms大气网站源码 spring+struts2+maven+extjs3完善的菜单和按钮权限管理后台 jQuery底部填充瀑布流.zip jquery平滑弹出幻灯片.zip jQuery类似窗帘左右拉开动画特效.zip jQuery页面右上角书页广告特效.zip 适合金融会计行业的网站模板.zip 鼠标滑过弹出jquery在线客服.zip CSS3折页扇子翻转动画效果代码.zip 大气的jQuery树型时间轴特效.zip jquery hover鼠标滑过动画导航条.zip 浅蓝色预约挂号网页模板.zip jquery+css3英语库选项卡.zip vue购物车商品累加结算代码.zip 绿色大气平面设计html5模板.zip 【ASP.NET源码】大连房产楼盘网_evhouse1.0.zip 大气浅绿色风格单页模板.zip 【ASP.NET源码】iwms(原动网新闻.Net) v4.4 SQL版_iwmssql.zip ECShop 海客送礼模板.zip jQuery抛物线运动轨迹动画特效.zip HTML5手机上下滑动翻页特效.zip 【PHP源码】智汀WAP下载站 v1.0_zjwap.zip J2ee SSH架构 网络论坛系统 蓝色时尚CSS3单页模板.zip css3锯齿花边价格表.zip div+css开发28套通用网站后台管理系统模板源码分享 dialog手机端弹出对话框确认特效.zip 【PHP源码】vBulletin v3.6.0 Gold 汉化标准版_vbulletin_3chs.zip iphone屏幕拖动特效.zip 微信小程序 - 笑话.zip 手机APP开发者项目网站模板.zip jQuery三图排列滑块幻灯片特效.zip CSS3多款不同滚动效果.zip jquery搜索引擎切换.zip 【PHP源码】影视联盟 v2.1 PHP版 Bulid 090421_fjqq_cn_comic_free_v3.1.zip 鼠标悬停css3发光效果特效.zip 简易CSS3 Tab菜单切换.zip Bo-Blog Waiting for you.zip 【PHP源码】Sablog-X 2.0 Beta Build 20090803_sablog-x.zip 服装电子商务公司网站模板.zip 右侧缩略图jQuery轮播图效果.zip jquery flash动画导航条.zip jQuery爱奇艺广告图片切换代码.zip HTML5+CSS3实现生日蛋糕.zip 【ASP.NET源码】zForumServer V5_zfansserver.zip html5单页模版notebook.zip 自行车企业网站模板.zip HTML5+CSS3超酷动态表单.zip XSS跨域攻击在web项目中的防范,基于antisamy技术 jquery右侧跟随悬浮固定窗口.zip linux Redis集群负载均衡部署完成 jquery hover鼠标悬停遮罩显示.zip Discuz! x2城市空间模板.zip 网上商城项目购物网站(javaweb基于ssh) jquery+css3华丽滚动效果.zip HTML医疗医院网站模板.zip jquery鼠标点击图片翻开切换效果.zip jQuery爱心拉近拉远动画背景特效.zip JSP+ACCESS网上拍卖平台系统 棕色拿着相机拍照网站模板.zip 仿GPS地图背景纯CSS3动画特效.zip qq空间遮罩层jQuery相册切换.zip html5手机触屏左右滑动切换特效.zip HTML5手机验证抽奖领券代码.zip ping的c++的实现 CSS3 SVG网页加载图标动画特效.zip google地图jquery插件.zip jQuery实现图片模糊显示特效.zip 橙色APP手机客户端网页模板.zip vue购物车商品累加结算代码.zip 高德地图api锁定地区查询代码.zip java 热加载 class 文件 酒店预订网站模板下载.zip jQuery自适应图片宽度幻灯片.zip 微信小程序 - 写笔记带后端.zip jave token 认证(JWT) jQuery多层堆叠展示导航菜单代码.zip jquery淡出效果插件jQFader.zip jQuery焦点图插件edslider.zip 探索发现html5网站模板.zip 【PHP源码】IP流量放大程序_adsystem2.zip 低仿糗事百科 css3个人信息面板导航.zip 墨蓝色设计案例展示模板.zip 必趣网首页jQuery焦点图.zip 现代农业种植网站模板.zip 微信小程序源码-老黄历 【ASP.NET源码】新普网络商城XpShop.net 6.6 Rc2 Bulid 081222_xpshop6.6_rc2.zip ASP,NET分享到新浪微博微信实例代码 jQuery手机端QQ微信分享插件.zip 淘帝最新版本Taodi V1.1.2(超漂亮的大红模板).zip 【PHP源码】仿中华网简单调查系统_vote.zip jQuery网格视图图片画廊.zip CSS3时钟圆形立体倒计时代码.zip 微信小程序源码-微信 华为CCE容器云实践 【PHP源码】phpMyAdmin v2.9.2 for Windows_phpmyadmin292.zip 水果沙拉甜点网站模板.zip 医疗人才网网站模板.zip jquery卡片式焦点图.zip 动物园网站模板.zip 微信小程序源码-【精品】旅游类 jQ大荧幕文字效果.zip 鼠标悬停内容移动切换jQuery.zip 基于ssm 的书店商城 【ASP.NET源码】在线生成条形码_barcode.zip 【PHP源码】OKPHP 网站管理+论坛系统套装 Build 0830_okphpcmsbbs.zip oracle11g驱动jar包 个人主站html模板下载.zip 微信小程序源码-巴爷商城带后端 蓝色宽屏摄影工作室网站模板.zip PHPWind论坛 可爱黑红卡通.zip Bootstrap手机导航下拉菜单代码.zip 住趣家居网满屏jQuery焦点图.zip 微信小程序 - 旅行.zip 小清新室内装饰网站模板.zip java-office转化为pdf 21CN社区Flash5屏焦点图.zip jQuery+CSS3实现动态提示信息条.zip jQuery网页动态场景插件jqfloat.zip 3D图片翻转展示CSS3.zip jquery图片滑动伸缩.zip css3全屏手风琴.zip 带时间线的宽屏图片切换.zip 不随滚动条滚动广告代码.zip 复制文本到剪贴板插件clipboard.zip 【PHP源码】根据IP显示五天天气预报(ip_tqyb_mzku) v3.0_tq.zip 微信小程序 - 挠痒痒.zip jQuery带时钟网站幻灯片代码.zip jQuery爆炸效果炫酷轮播焦点图.zip 用swift制作的下方伸展菜单 jquery纵横菜单demo jQuery网格扩展为旋转木马特效.zip Android定时器 Discuz! x2.5端午节模板.zip jQuery点击图片拖动放大查看效果.zip 高楼建筑HTML5网页模板.zip css3小船水面游动动画特效.zip 一套 easyui 的经典后台管理模板 jd-gui(java反编译工具) 绿色时钟商务整站模板.zip jquery metro拖动菜单代码.zip 22款不同效果产品图片展示切换.zip spring+springmvc+hibernate+ehcache JavaWeb后台框架 spring boot多数据源自动路由 jquery悬浮微信分享置顶特效.zip HTML5 Canvas条形码生成代码.zip CSS3 Sprite僵尸行走动画特效.zip PHPWind论坛 颓废风格.zip CSS3雷达扫描动画特效.zip 扁平化医疗科研机构官网模板.zip jquery鼠标滑过闪光滑出标题.zip 【PHP源码】PageCookery Microblog 0.5.1 Build 090909_pagecookery_microblog.zip 美食厨艺css网站模板.zip 动物宠物布局CSS网页模板.zip 公司博客CSS网页模板.zip 企业网站模板免费下载.zip 可跳转回首页的CSS二级联动菜单.zip 【ASP.NET源码】DJ70多用户网络收藏夹系统_dj70url.zip 大气简洁单页html5模板.zip 职业车手介绍网站模板.zip 【PHP源码】PhpSay 可视化编辑器 v1.6.2_phpsay_edit.zip html5圆形进度条加载按钮.zip html5拍照上传头像裁剪代码.zip jquery图片滚动条放大效果.zip java开发员工工资管理系统和酒家点餐系统小demo 绿色养生足浴网站模板.zip jquery带播放器按钮焦点图.zip 洗车行业网站模板.zip CSS3鼠标滑过导航出现下划线动画特效.zip 商业投资HTML5模板.zip WIN 7透明弹窗效果.zip 原生JS实现中文简繁切换.zip jquery手动自动图片切换.zip 微信小程序源码-轮播图变换 jQuery导航菜单背景切换特效.zip 五一海报设计模板下载.zip jQuery动画焦点图片轮播.zip 【PHP源码】Disucz! v5.5.0 UTF-8繁体中文版_discuz!_5.5.0_tc_utf8.zip jquery圆形转盘抽奖.zip JS手机端多图片上传删除代码.zip jQuery图片缩放图片图片转动仿QQ空间图片查看特效 CSS3实现骑摩托车兜风动画特效.zip wordpress格子图片主题.zip 原生JS实现大图片按比例缩放.zip 有机蔬菜农场整站模板.zip jquery左右滚动切换.zip js图片嵌套点击放大特效.zip 可关闭打开的flash拉链广告.zip 微信小程序源码-校内新闻大图 HTML5主题餐厅网站模板.zip 微信小程序源码-图片展示 大气单页美食网站模板.zip jquery灯箱插件Rebox.zip jQuery手风琴插件rlaccordion.zip 【ASP.NET源码】新普网络商城XpShop 生成静态页面SQL版 6.5 Build 20081005_xpshop6.5.zip jQuery触摸手机上下滑动滚屏特效.zip Spring Restful 可运行完整项目
举报X