小巧强大的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"} }）;

【页面层二】

var pageii = $.layer（{ type: 1, title: false, area: ["auto", "auto"], border: [0], //去掉默认边框 shade: [0], //去掉遮罩 closeBtn: [0, false], //去掉默认关闭按钮 shift: "left", //从左动画弹出 page: { html: "<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来，我自定了风 格。</p><button id="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 var conf = {}; $.getJSON（"ajax地址", {}, function（json）{ conf.photoJSON = json; //保存json，以便下次直接读取内存数据 layer.photos（{ html: "这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭", json: json }）; }）;