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


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 08 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
JS对日期操作封装代码实例
Nov 08 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中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
php接口技术实例详解
2016/12/07 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript几个易错点记录
2014/11/26 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
中间件分为哪几类
2012/03/14 面试题
护理学专业推荐信
2013/12/03 职场文书
租车协议书范本2014
2014/11/17 职场文书
毕业论文致谢范文
2015/05/14 职场文书
英雄儿女观后感
2015/06/09 职场文书
七年级作文之雪景
2019/11/18 职场文书
如何使用pdb进行Python调试
2021/06/30 Python