基本信息
源码名称:zepto弹窗组件 例子下载
源码大小:0.02M
文件格式:.zip
开发语言:js
更新时间:2016-04-12
友情提示:(无需注册或充值,赞助后即可获取资源下载链接)
嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300
本次赞助数额为: 2 元×
微信扫码支付:2 元
×
请留下您的邮箱,我们将在2小时内将文件发到您的邮箱
源码介绍
<!DOCTYPE html> <html> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <script src="zepto.js"></script> <script src="car-popup.js"></script> <link href="car-popup.css" rel="stylesheet" /> <body> <h1>弹出层DEMO</h1> <a href="#" id="btn-aaa">打开一个表单</a> <a href="#" id="btn-bbb">普通提示</a> <a href="#" id="btn-ccc">选择确认框</a> <br><br> <div style="display: none;"> 用于演示用的表单,实际中会将容器隐藏 <form id="form-1"> a:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> b:<input type="text"> <br> <input type="submit"> </form> </div> <!--调用说明--> <pre> //依赖文件 zepto.js //默认值配置 var defaults = { id:'', formId:null, title:"提示", message:"", cnacel:"取消", onCancel: function(){}, ok:"确认", onOk: function(){}, cancelOnly:false, okClass:'button', cancelClass:'button', onShow:function(){}, onHide:function(){}, closeOnOk:true, hideTitle:false, //重写样式 popClass:'' }; //调用示例: //默认容器都是body $('body').popup({ title:'表单提交' ,id:'pop-1' ,formId:'form-1' ,closeOnOk:false ,ok:'提交' ,onOk:function(){ $('#form-1').submit(); } }); </pre> </body> </html> <script> $('#btn-aaa').click(function(){ $('body').popup({ title:'表单提交' ,id:'pop-1' ,formId:'form-1' ,closeOnOk:false ,ok:'提交' ,onOk:function(){ $('#form-1').submit(); } }); return false; }); $('#btn-bbb').click(function(){ $('body').popup('这是普通提示'); return false; }); $('#btn-ccc').click(function(){ $('body').popup({ title:'提示' ,message:'您是否要退出' ,id:'pop-2' ,onOk:function(){ alert('OK'); } }); return false; }); $('#form-1').bind('submit',function(){ alert('表单form-1提交'); return false; }); </script>