小巧强大的jquery layer弹窗弹层插件
先去官网下载最新的js http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js
触发弹层的事件可自由绑定，如：
$('#id').on('click',function(){
layer.msg('test');
});
下面主要贴出上述例子的调用代码：
【信息框】：
layer.alert('白菜级别前端攻城师贤心',8);//风格一
layer.msg('前端攻城师贤心');//风格二
//当然，远远不止这两种风格。
【询问框】：
$.layer({
shade:[0],
area:['auto','auto'],
dialog:{
msg:'您是如何看待前端开发？',
btns:2,
type:4,
btn:['重要','奇葩'],
yes:function(){
layer.msg('重要',1,1);
},no:function(){
layer.msg('奇葩',1,13);
}
}
});
//还可用layer.confirm()快捷调用
【页面层一】
$.layer({
type:1,
shade:[0],
area:['auto','auto'],
title:false,
border:[0],
page:{dom:'.layer_notice'}
});
【页面层二】
varpageii=$.layer({
type:1,
title:false,
area:['auto','auto'],
border:[0],//去掉默认边框
shade:[0],//去掉遮罩
closeBtn:[0,false],//去掉默认关闭按钮
shift:'left',//从左动画弹出
page:{
html:'<divstyle="width:420px;height:260px;padding:20px;border:1pxsolid#ccc;background-color:#eee;"><p>我从左边来，我自定了风格。</p><buttonid="pagebtn"class="btns"onclick="">关闭</button></div>'
}
});
//自设关闭
$('#pagebtn').on('click',function(){
layer.close(pageii);
});
【iframe层一】
$.layer({
type:2,
shadeClose:true,
title:false,
closeBtn:[0,false],
shade:[0.8,'#000'],
border:[0],
offset:['20px',''],
area:['1000px',($(window).height()-50)+'px'],
iframe:{src:'http://f2e.sentsin.com/chat'}
});
【iframe层二】
layer.tips('5秒后右下角窗口自动关闭，并生成一个新的iframe',this,{
time:5,
maxWidth:260
});
$.layer({
type:2,
closeBtn:false,
shadeClose:true,
shade:[0.1,'#fff'],
border:[0],
time:5,
iframe:{
src:'test/guodu.html'
},
title:false,
area:['300px','250px'],
shift:'right-bottom',
end:function(){
$.layer({
type:2,
title:'贤心博客-sentsin.com',
shadeClose:true,
maxmin:true,
fix:false,
area:['1024px',500],
iframe:{
src:'http://sentsin.com/'
}
});
}
});
【加载层一】
layer.load(3);
【加载层二】
layer.load('加载带文字',3);
【tips层一】
layer.tips('tips的样式并非是固定的，您可自定义外观。',this,{
style:['background-color:#78BA32;color:#fff','#78BA32'],
maxWidth:185,
time:3,
closeBtn:[0,true]
});
【tips层二】
layer.tips('默认没有关闭按钮',this,{guide:1,time:2});
【输入/文件层】
//普通文本
layer.prompt({title:'您的名字？'},function(name){
alert(name);
});
//密码文本
layer.prompt({title:'输入任何口令，并确认',type:1},function(pass){
alert(pass);
});
//文件上传
layer.prompt({title:'随便上传个东东，并确认',type:2},function(file){
alert(file);
});
//多行文本
layer.prompt({title:'随便写点啥，并确认',type:3},function(val){
alert(val);
});
【tab层】
layer.tab({
area:['1000px','500px'],
data:[
{title:'Say',content:'Hi，Main'},
{title:'无题',content:'支持html传入'}
]
});
【相册层】
//此处为异步请求模式，具体的json格式，请等待文档更新。或者你直接通过请求看photos.json
varconf={};
$.getJSON('ajax地址',{},function(json){
conf.photoJSON=json;//保存json，以便下次直接读取内存数据
layer.photos({
html:'这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭',
json:json
});
});