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


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下判断是否为闰年的Datetime包
Oct 26 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
js 数组 fill() 填充方法
Nov 02 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
js oncontextmenu事件使用详解
2017/03/25 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
js实现数字滚动特效
2019/12/16 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python 输出所有大小写字母的方法
2019/01/02 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python实现在一个画布上画多个子图
2020/01/19 Python
市场开发与营销专业求职信
2013/12/31 职场文书
2014年党课学习材料
2014/05/11 职场文书
小班下学期个人总结
2015/02/12 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
《我的长生果》教学反思
2016/02/20 职场文书