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


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 相关文章推荐
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
vue axios登录请求拦截器
Apr 02 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 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来处理多个提交任务
2006/10/09 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP单链表的实现代码
2016/07/05 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
python正则表达式re之compile函数解析
2017/10/25 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python实现弹跳小球
2019/05/13 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python属于解释语言吗
2020/06/11 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
高中军训的心得体会
2014/09/01 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
中学教师读书笔记
2015/07/01 职场文书
感恩教师节主题班会
2015/08/12 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Python 如何安装Selenium
2021/05/06 Python