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


Posted in Javascript onMarch 10, 2017

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

实现效果图:

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

实现代码:             

<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);
}

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

Javascript 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
BootStrap表单宽度设置方法
Mar 10 #Javascript
Angular.js基础学习之初始化
Mar 10 #Javascript
js实现返回顶部效果
Mar 10 #Javascript
Vue.directive自定义指令的使用详解
Mar 10 #Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 #Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 #Javascript
微信小程序 页面传值详解
Mar 10 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
如何使用php输出时间格式
2013/08/31 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
js a标签点击事件
2017/03/30 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python自动化测试之连接几组测试包实例
2014/09/28 Python
python自动格式化json文件的方法
2015/03/11 Python
mac下如何将python2.7改为python3
2018/07/13 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
python中如何使用虚拟环境
2020/10/14 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
校园达人秀策划书
2014/01/12 职场文书
负责培养人意见
2015/06/05 职场文书
2016公司新年问候语
2015/11/11 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Python如何加载模型并查看网络
2022/07/15 Python