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


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高亮效果的二种实现方法
Sep 14 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
js获取域名的方法
Jan 27 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
php读取数据库信息的几种方法
2008/05/24 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
设定php简写功能的方法
2019/11/28 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
js对象基础实例分析
2015/01/13 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
深入理解JS异步编程-Promise
2019/06/03 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
Python图像处理库PIL的ImageGrab模块介绍详解
2020/02/26 Python
Django ModelForm操作及验证方式
2020/03/30 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
单位绩效考核方案
2014/05/11 职场文书
出国签证在职证明
2014/09/20 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年党建工作总结
2014/11/11 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
高一地理教学工作总结
2015/08/12 职场文书