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


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中的var_dump函数实现代码
Sep 07 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python简单文本处理的方法
2015/07/10 Python
Python 中的with关键字使用详解
2016/09/11 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
Python 自由定制表格的实现示例
2020/03/20 Python
pycharm安装及如何导入numpy
2020/04/03 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
车队安全员岗位职责
2015/02/15 职场文书
2015年宣传工作总结
2015/04/08 职场文书
山楂树之恋观后感
2015/06/11 职场文书