开发网站的时候，如何合理运用好各种插件对开发的帮助是很大的。
免去了我们调试各种交互效果，
比如常用的弹窗、气泡、提示、加载、焦点、标签、导航、折叠等等
这里会推荐几个常用的js插件，丰富多样简单易移植很适合我们做前台开发使用
第一个插件：多功能弹窗控件layer-v2.4 下载地址：http://layer.layui.com/
页面调用js
1 //初体验 2 layer.alert('内容') 3 //第三方扩展皮肤 4 layer.alert('内容', { 5 icon: 1, 6 skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 7 }) 8 //询问框 9 layer.confirm('您是如何看待前端开发？', { 10 btn: ['重要','奇葩'] //按钮 11 }, function(){ 12 layer.msg('的确很重要', {icon: 1}); 13 }, function(){ 14 layer.msg('也可以这样', { 15 time: 20000, //20s后自动关闭 16 btn: ['明白了', '知道了'] 17 }); 18 }); 19 //提示层 20 layer.msg('玩命提示中'); 21 //墨绿深蓝风 22 layer.alert('墨绿风格，点击确认看深蓝', { 23 skin: 'layui-layer-molv' //样式类名 24 ,closeBtn: 0 25 }, function(){ 26 layer.alert('偶吧深蓝style', { 27 skin: 'layui-layer-lan' 28 ,closeBtn: 0 29 ,shift: 4 //动画类型 30 }); 31 }); 32 //捕获页 33 layer.open({ 34 type: 1, 35 shade: false, 36 title: false, //不显示标题 37 content: $('.layer_notice'), //捕获的元素 38 cancel: function(index){ 39 layer.close(index); 40 this.content.show(); 41 layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6}); 42 } 43 }); 44 //页面层 45 layer.open({ 46 type: 1, 47 skin: 'layui-layer-rim', //加上边框 48 area: ['420px', '240px'], //宽高 49 content: 'html内容' 50 }); 51 //自定页 52 layer.open({ 53 type: 1, 54 skin: 'layui-layer-demo', //样式类名 55 closeBtn: 0, //不显示关闭按钮 56 shift: 2, 57 shadeClose: true, //开启遮罩关闭 58 content: '内容' 59 }); 60 //tips层 61 layer.tips('Hi，我是tips', '吸附元素选择器，如#id'); 62 //iframe层 63 layer.open({ 64 type: 2, 65 title: 'layer mobile页', 66 shadeClose: true, 67 shade: 0.8, 68 area: ['380px', '90%'], 69 content: 'http://layer.layui.com/mobile/' //iframe的url 70 }); 71 //iframe窗 72 layer.open({ 73 type: 2, 74 title: false, 75 closeBtn: 0, //不显示关闭按钮 76 shade: [0], 77 area: ['340px', '215px'], 78 offset: 'rb', //右下角弹出 79 time: 2000, //2秒后自动关闭 80 shift: 2, 81 content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条 82 end: function(){ //此处用于演示 83 layer.open({ 84 type: 2, 85 title: '很多时候，我们想最大化看，比如像这个页面。', 86 shadeClose: true, 87 shade: false, 88 maxmin: true, //开启最大化最小化按钮 89 area: ['893px', '600px'], 90 content: 'http://fly.layui.com/' 91 }); 92 } 93 }); 94 //加载层 95 var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2 96 //loading层 97 var index = layer.load(1, { 98 shade: [0.1,'#fff'] //0.1透明度的白色背景 99 });100 //小tips101 layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {102 tips: [1, '#3595CC'],103 time: 4000104 });105 //prompt层106 layer.prompt({107 title: '输入任何口令，并确认',108 formType: 1 //prompt风格，支持0-2109 }, function(pass){110 layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){111 layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text);112 });113 });114 //tab层115 layer.tab({116 area: ['600px', '300px'],117 tab: [{118 title: 'TAB1', 119 content: '内容1'120 }, {121 title: 'TAB2', 122 content: '内容2'123 }, {124 title: 'TAB3', 125 content: '内容3'126 }]127 });128 //相册层129 $.getJSON('test/photos.json?v='+new Date, function(json){130 layer.photos({131 photos: json //格式见API文档手册页132 ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机133 });134 });
js文件
/*! layer-v2.4 弹层组件 License LGPL http://layer.layui.com/ By 贤心 */;!function(a,b){"use strict";var c,d,e={getPath:function(){ var a=document.scripts,b=a[a.length-1],c=b.src;if(!b.getAttribute("merge"))return c.substring(0,c.lastIndexOf("/")+1)}(),enter:function(a){13===a.keyCode&&a.preventDefault()},config:{},end:{},btn:["确定","取消"],type:["dialog","page","iframe","loading","tips"]},f={v:"2.4",ie6:!!a.ActiveXObject&&!a.XMLHttpRequest,index:0,path:e.getPath,config:function(a,b){ var d=0;return a=a||{},f.cache=e.config=c.extend(e.config,a),f.path=e.config.path||f.path,"string"==typeof a.extend&&(a.extend=[a.extend]),f.use("skin/layer.css",a.extend&&a.extend.length>0?function g(){ var c=a.extend;f.use(c[c[d]?d:d-1],d '+(i?f.title[0]:f.title)+"":"";return f.zIndex=g,b([f.shade?' ':"",' '+(a&&2!=f.type?"":k)+' '+(0==f.type&&-1!==f.icon?' ':"")+(1==f.type&&a?"":f.content||"")+' '+function(){ var a=j?'':"";return f.closeBtn&&(a+=''),a}()+""+(f.btn?function(){ var a="";"string"==typeof f.btn&&(f.btn=[f.btn]);for(var b=0,c=f.btn.length;c>b;b++)a+=' '+f.btn[b]+"";return' '+a+" "}():"")+" "],k),c},g.pt.creat=function(){ var a=this,b=a.config,g=a.index,i=b.content,j="object"==typeof i;if(!c("#"+b.id)[0]){ switch("string"==typeof b.area&&(b.area="auto"===b.area?["",""]:[b.area,""]),b.type){ case 0:b.btn="btn"in b?b.btn:e.btn[0],f.closeAll("dialog");break;case 2:var i=b.content=j?b.content:[b.content||"http://layer.layui.com","auto"];b.content=' ';break;case 3:b.title=!1,b.closeBtn=!1,-1===b.icon&&0===b.icon,f.closeAll("loading");break;case 4:j||(b.content=[b.content,"body"]),b.follow=b.content[1],b.content=b.content[0]+' ',b.title=!1,b.tips="object"==typeof b.tips?b.tips:[b.tips,!0],b.tipsMore||f.closeAll("tips")}a.vessel(j,function(d,e){c("body").append(d[0]),j?function(){2==b.type||4==b.type?function(){c("body").append(d[1])}():function(){i.parents("."+h[0])[0]||(i.show().addClass("layui-layer-wrap").wrap(d[1]),c("#"+h[0]+g).find("."+h[5]).before(e))}()}():c("body").append(d[1]),a.layero=c("#"+h[0]+g),b.scrollbar||h.html.css("overflow","hidden").attr("layer-full",g)}).auto(g),2==b.type&&f.ie6&&a.layero.find("iframe").attr("src",i[0]),c(document).off("keydown",e.enter).on("keydown",e.enter),a.layero.on("keydown",function(a){c(document).off("keydown",e.enter)}),4==b.type?a.tips():a.offset(),b.fix&&d.on("resize",function(){a.offset(),(/^\d+%$/.test(b.area[0])||/^\d+%$/.test(b.area[1]))&&a.auto(g),4==b.type&&a.tips()}),b.time<=0||setTimeout(function(){f.close(a.index)},b.time),a.move().callback(),h.anim[b.shift]&&a.layero.addClass(h.anim[b.shift])}},g.pt.auto=function(a){ function b(a){a=g.find(a),a.height(i[1]-j-k-2*(0|parseFloat(a.css("padding"))))}var e=this,f=e.config,g=c("#"+h[0]+a);""===f.area[0]&&f.maxWidth>0&&(/MSIE 7/.test(navigator.userAgent)&&f.btn&&g.width(g.innerWidth()),g.outerWidth()>f.maxWidth&&g.width(f.maxWidth));var i=[g.innerWidth(),g.innerHeight()],j=g.find(h[1]).outerHeight()||0,k=g.find("."+h[6]).outerHeight()||0;switch(f.type){ case 2:b("iframe");break;default:""===f.area[1]?f.fix&&i[1]>=d.height()&&(i[1]=d.height(),b("."+h[5])):b("."+h[5])}return e},g.pt.offset=function(){ var a=this,b=a.config,c=a.layero,e=[c.outerWidth(),c.outerHeight()],f="object"==typeof b.offset;a.offsetTop=(d.height()-e[1])/2,a.offsetLeft=(d.width()-e[0])/2,f?(a.offsetTop=b.offset[0],a.offsetLeft=b.offset[1]||a.offsetLeft):"auto"!==b.offset&&(a.offsetTop=b.offset,"rb"===b.offset&&(a.offsetTop=d.height()-e[1],a.offsetLeft=d.width()-e[0])),b.fix||(a.offsetTop=/%$/.test(a.offsetTop)?d.height()*parseFloat(a.offsetTop)/100:parseFloat(a.offsetTop),a.offsetLeft=/%$/.test(a.offsetLeft)?d.width()*parseFloat(a.offsetLeft)/100:parseFloat(a.offsetLeft),a.offsetTop+=d.scrollTop(),a.offsetLeft+=d.scrollLeft()),c.css({top:a.offsetTop,left:a.offsetLeft})},g.pt.tips=function(){ var a=this,b=a.config,e=a.layero,f=[e.outerWidth(),e.outerHeight()],g=c(b.follow);g[0]||(g=c("body"));var i={width:g.outerWidth(),height:g.outerHeight(),top:g.offset().top,left:g.offset().left},j=e.find(".layui-layer-TipsG"),k=b.tips[0];b.tips[1]||j.remove(),i.autoLeft=function(){i.left+f[0]-d.width()>0?(i.tipLeft=i.left+i.width-f[0],j.css({right:12,left:"auto"})):i.tipLeft=i.left},i.where=[function(){i.autoLeft(),i.tipTop=i.top-f[1]-10,j.removeClass("layui-layer-TipsB").addClass("layui-layer-TipsT").css("border-right-color",b.tips[1])},function(){i.tipLeft=i.left+i.width+10,i.tipTop=i.top,j.removeClass("layui-layer-TipsL").addClass("layui-layer-TipsR").css("border-bottom-color",b.tips[1])},function(){i.autoLeft(),i.tipTop=i.top+i.height+10,j.removeClass("layui-layer-TipsT").addClass("layui-layer-TipsB").css("border-right-color",b.tips[1])},function(){i.tipLeft=i.left-f[0]-10,i.tipTop=i.top,j.removeClass("layui-layer-TipsR").addClass("layui-layer-TipsL").css("border-bottom-color",b.tips[1])}],i.where[k-1](),1===k?i.top-(d.scrollTop()+f[1]+16)<0&&i.where[2]():2===k?d.width()-(i.left+i.width+f[0]+16)>0||i.where[3]():3===k?i.top-d.scrollTop()+i.height+f[1]+16-d.height()>0&&i.where[0]():4===k&&f[0]+16-i.left>0&&i.where[1](),e.find("."+h[5]).css({"background-color":b.tips[1],"padding-right":b.closeBtn?"30px":""}),e.css({left:i.tipLeft-(b.fix?d.scrollLeft():0),top:i.tipTop-(b.fix?d.scrollTop():0)})},g.pt.move=function(){ var a=this,b=a.config,e={setY:0,moveLayer:function(){ var a=e.layero,b=parseInt(a.css("margin-left")),c=parseInt(e.move.css("left"));0===b||(c-=b),"fixed"!==a.css("position")&&(c-=a.parent().offset().left,e.setY=0),a.css({left:c,top:parseInt(e.move.css("top"))-e.setY})}},f=a.layero.find(b.move);return b.move&&f.attr("move","ok"),f.css({cursor:b.move?"move":"auto"}),c(b.move).on("mousedown",function(a){ if(a.preventDefault(),"ok"===c(this).attr("move")){e.ismove=!0,e.layero=c(this).parents("."+h[0]);var f=e.layero.offset().left,g=e.layero.offset().top,i=e.layero.outerWidth()-6,j=e.layero.outerHeight()-6;c("#layui-layer-moves")[0]||c("body").append(' '),e.move=c("#layui-layer-moves"),b.moveType&&e.move.css({visibility:"hidden"}),e.moveX=a.pageX-e.move.position().left,e.moveY=a.pageY-e.move.position().top,"fixed"!==e.layero.css("position")||(e.setY=d.scrollTop())}}),c(document).mousemove(function(a){ if(e.ismove){ var c=a.pageX-e.moveX,f=a.pageY-e.moveY;if(a.preventDefault(),!b.moveOut){e.setY=d.scrollTop();var g=d.width()-e.move.outerWidth(),h=e.setY;0>c&&(c=0),c>g&&(c=g),h>f&&(f=h),f>d.height()-e.move.outerHeight()+e.setY&&(f=d.height()-e.move.outerHeight()+e.setY)}e.move.css({left:c,top:f}),b.moveType&&e.moveLayer(),c=f=g=h=null}}).mouseup(function(){ try{e.ismove&&(e.moveLayer(),e.move.remove(),b.moveEnd&&b.moveEnd()),e.ismove=!1}catch(a){e.ismove=!1}}),a},g.pt.callback=function(){ function a(){ var a=g.cancel&&g.cancel(b.index,d);a===!1||f.close(b.index)}var b=this,d=b.layero,g=b.config;b.openLayer(),g.success&&(2==g.type?d.find("iframe").on("load",function(){g.success(d,b.index)}):g.success(d,b.index)),f.ie6&&b.IE6(d),d.find("."+h[6]).children("a").on("click",function(){ var a=c(this).index();if(0===a)g.yes?g.yes(b.index,d):g.btn1?g.btn1(b.index,d):f.close(b.index);else{ var e=g["btn"+(a+1)]&&g["btn"+(a+1)](b.index,d);e===!1||f.close(b.index)}}),d.find("."+h[7]).on("click",a),g.shadeClose&&c("#layui-layer-shade"+b.index).on("click",function(){f.close(b.index)}),d.find(".layui-layer-min").on("click",function(){ var a=g.min&&g.min(d);a===!1||f.min(b.index,g)}),d.find(".layui-layer-max").on("click",function(){c(this).hasClass("layui-layer-maxmin")?(f.restore(b.index),g.restore&&g.restore(d)):(f.full(b.index,g),setTimeout(function(){g.full&&g.full(d)},100))}),g.end&&(e.end[b.index]=g.end)},e.reselect=function(){c.each(c("select"),function(a,b){ var d=c(this);d.parents("."+h[0])[0]||1==d.attr("layer")&&c("."+h[0]).length<1&&d.removeAttr("layer").show(),d=null})},g.pt.IE6=function(a){ function b(){a.css({top:f+(e.config.fix?d.scrollTop():0)})}var e=this,f=a.offset().top;b(),d.scroll(b),c("select").each(function(a,b){ var d=c(this);d.parents("."+h[0])[0]||"none"===d.css("display")||d.attr({layer:"1"}).hide(),d=null})},g.pt.openLayer=function(){ var a=this;f.zIndex=a.config.zIndex,f.setTop=function(a){ var b=function(){f.zIndex++,a.css("z-index",f.zIndex+1)};return f.zIndex=parseInt(a[0].style.zIndex),a.on("mousedown",b),f.zIndex}},e.record=function(a){ var b=[a.width(),a.height(),a.position().top,a.position().left+parseFloat(a.css("margin-left"))];a.find(".layui-layer-max").addClass("layui-layer-maxmin"),a.attr({area:b})},e.rescollbar=function(a){h.html.attr("layer-full")==a&&(h.html[0].style.removeProperty?h.html[0].style.removeProperty("overflow"):h.html[0].style.removeAttribute("overflow"),h.html.removeAttr("layer-full"))},a.layer=f,f.getChildFrame=function(a,b){ return b=b||c("."+h[4]).attr("times"),c("#"+h[0]+b).find("iframe").contents().find(a)},f.getFrameIndex=function(a){ return c("#"+a).parents("."+h[4]).attr("times")},f.iframeAuto=function(a){ if(a){ var b=f.getChildFrame("html",a).outerHeight(),d=c("#"+h[0]+a),e=d.find(h[1]).outerHeight()||0,g=d.find("."+h[6]).outerHeight()||0;d.css({height:b+e+g}),d.find("iframe").css({height:b})}},f.iframeSrc=function(a,b){c("#"+h[0]+a).find("iframe").attr("src",b)},f.style=function(a,b){ var d=c("#"+h[0]+a),f=d.attr("type"),g=d.find(h[1]).outerHeight()||0,i=d.find("."+h[6]).outerHeight()||0;(f===e.type[1]||f===e.type[2])&&(d.css(b),f===e.type[2]&&d.find("iframe").css({height:parseFloat(b.height)-g-i}))},f.min=function(a,b){ var d=c("#"+h[0]+a),g=d.find(h[1]).outerHeight()||0;e.record(d),f.style(a,{width:180,height:g,overflow:"hidden"}),d.find(".layui-layer-min").hide(),"page"===d.attr("type")&&d.find(h[4]).hide(),e.rescollbar(a)},f.restore=function(a){ var b=c("#"+h[0]+a),d=b.attr("area").split(",");b.attr("type");f.style(a,{width:parseFloat(d[0]),height:parseFloat(d[1]),top:parseFloat(d[2]),left:parseFloat(d[3]),overflow:"visible"}),b.find(".layui-layer-max").removeClass("layui-layer-maxmin"),b.find(".layui-layer-min").show(),"page"===b.attr("type")&&b.find(h[4]).show(),e.rescollbar(a)},f.full=function(a){ var b,g=c("#"+h[0]+a);e.record(g),h.html.attr("layer-full")||h.html.css("overflow","hidden").attr("layer-full",a),clearTimeout(b),b=setTimeout(function(){ var b="fixed"===g.css("position");f.style(a,{top:b?0:d.scrollTop(),left:b?0:d.scrollLeft(),width:d.width(),height:d.height()}),g.find(".layui-layer-min").hide()},100)},f.title=function(a,b){ var d=c("#"+h[0]+(b||f.index)).find(h[1]);d.html(a)},f.close=function(a){ var b=c("#"+h[0]+a),d=b.attr("type");if(b[0]){ if(d===e.type[1]&&"object"===b.attr("conType")){b.children(":not(."+h[5]+")").remove();for(var g=0;2>g;g++)b.find(".layui-layer-wrap").unwrap().hide()}else{ if(d===e.type[2])try{ var i=c("#"+h[4]+a)[0];i.contentWindow.document.write(""),i.contentWindow.close(),b.find("."+h[5])[0].removeChild(i)}catch(j){}b[0].innerHTML="",b.remove()}c("#layui-layer-moves, #layui-layer-shade"+a).remove(),f.ie6&&e.reselect(),e.rescollbar(a),c(document).off("keydown",e.enter),"function"==typeof e.end[a]&&e.end[a](),delete e.end[a]}},f.closeAll=function(a){c.each(c("."+h[0]),function(){ var b=c(this),d=a?b.attr("type")===a:1;d&&f.close(b.attr("times")),d=null})};var i=f.cache||{},j=function(a){ return i.skin?" "+i.skin+" "+i.skin+"-"+a:""};f.prompt=function(a,b){a=a||{},"function"==typeof a&&(b=a);var d,e=2==a.formType?' ":function(){ return' '}();return f.open(c.extend({btn:["确定","取消"],content:e,skin:"layui-layer-prompt"+j("prompt"),success:function(a){d=a.find(".layui-layer-input"),d.focus()},yes:function(c){ var e=d.val();""===e?d.focus():e.length>(a.maxlength||500)?f.tips("最多输入"+(a.maxlength||500)+"个字数",d,{tips:1}):b&&b(e,c,d)}},a))},f.tab=function(a){a=a||{};var b=a.tab||{};return f.open(c.extend({type:1,skin:"layui-layer-tab"+j("tab"),title:function(){ var a=b.length,c=1,d="";if(a>0)for(d=' '+b[0].title+"";a>c;c++)d+=" "+b[c].title+"";return d}(),content:' '+function(){ var a=b.length,c=1,d="";if(a>0)for(d=' - '+(b[0].content||"no content")+"
";a>c;c++)d+=' - '+(b[c].content||"no content")+"
";return d}()+"
",success:function(b){ var d=b.find(".layui-layer-title").children(),e=b.find(".layui-layer-tabmain").children();d.on("mousedown",function(b){b.stopPropagation?b.stopPropagation():b.cancelBubble=!0;var d=c(this),f=d.index();d.addClass("layui-layer-tabnow").siblings().removeClass("layui-layer-tabnow"),e.eq(f).show().siblings().hide(),"function"==typeof a.change&&a.change(f)})}},a))},f.photos=function(b,d,e){ function g(a,b,c){ var d=new Image;return d.src=a,d.complete?b(d):(d.οnlοad=function(){d.οnlοad=null,b(d)},void(d.οnerrοr=function(a){d.οnerrοr=null,c(a)}))}var h={};if(b=b||{},b.photos){ var i=b.photos.constructor===Object,k=i?b.photos:{},l=k.data||[],m=k.start||0;if(h.imgIndex=(0|m)+1,b.img=b.img||"img",i){ if(0===l.length)return f.msg("没有图片")}else{ var n=c(b.photos),o=function(){l=[],n.find(b.img).each(function(a){ var b=c(this);b.attr("layer-index",a),l.push({alt:b.attr("alt"),pid:b.attr("layer-pid"),src:b.attr("layer-src")||b.attr("src"),thumb:b.attr("src")})})};if(o(),0===l.length)return;if(d||n.on("click",b.img,function(){ var a=c(this),d=a.attr("layer-index");f.photos(c.extend(b,{photos:{start:d,data:l,tab:b.tab},full:b.full}),!0),o()}),!d)return}h.imgprev=function(a){h.imgIndex--,h.imgIndex<1&&(h.imgIndex=l.length),h.tabimg(a)},h.imgnext=function(a,b){h.imgIndex++,h.imgIndex>l.length&&(h.imgIndex=1,b)||h.tabimg(a)},h.keyup=function(a){ if(!h.end){ var b=a.keyCode;a.preventDefault(),37===b?h.imgprev(!0):39===b?h.imgnext(!0):27===b&&f.close(h.index)}},h.tabimg=function(a){l.length<=1||(k.start=h.imgIndex-1,f.close(h.index),f.photos(b,!0,a))},h.event=function(){h.bigimg.hover(function(){h.imgsee.show()},function(){h.imgsee.hide()}),h.bigimg.find(".layui-layer-imgprev").on("click",function(a){a.preventDefault(),h.imgprev()}),h.bigimg.find(".layui-layer-imgnext").on("click",function(a){a.preventDefault(),h.imgnext()}),c(document).on("keyup",h.keyup)},h.loadi=f.load(1,{shade:"shade"in b?!1:.9,scrollbar:!1}),g(l[m].src,function(d){f.close(h.loadi),h.index=f.open(c.extend({type:1,area:function(){ var e=[d.width,d.height],f=[c(a).width()-50,c(a).height()-50];return!b.full&&e[0]>f[0]&&(e[0]=f[0],e[1]=e[0]*d.height/d.width),[e[0]+"px",e[1]+"px"]}(),title:!1,shade:.9,shadeClose:!0,closeBtn:!1,move:".layui-layer-phimg img",moveType:1,scrollbar:!1,moveOut:!0,shift:5*Math.random()|0,skin:"layui-layer-photos"+j("photos"),content:' ",success:function(a,c){h.bigimg=a.find(".layui-layer-phimg"),h.imgsee=a.find(".layui-layer-imguide,.layui-layer-imgbar"),h.event(a),b.tab&&b.tab(l[m],a)},end:function(){h.end=!0,c(document).off("keyup",h.keyup)}},b))},function(){f.close(h.loadi),f.msg("当前图片地址异常 是否继续查看下一张？",{time:3e4,btn:["下一张","不看了"],yes:function(){l.length>1&&h.imgnext(!0,!0)}})})}},e.run=function(){c=jQuery,d=c(a),h.html=c("html"),f.open=function(a){var b=new g(a);return b.index}},"function"==typeof define?define(function(){return e.run(),f}):function(){e.run(),f.use("skin/layer.css")}()}(window);
css文件
/*! @Name: layer's style @Author: 贤心 @Blog： sentsin.com */.layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span,.layui-layer-title{ text-overflow:ellipsis;white-space:nowrap}*html{ background-image:url(about:blank);background-attachment:fixed}html #layui_layer_skinlayercss{ display:none;position:absolute;width:1989px}.layui-layer,.layui-layer-shade{ position:fixed;_position:absolute;pointer-events:auto}.layui-layer-shade{ top:0;left:0;width:100%;height:100%;_height:expression(document.body.offsetHeight+"px")}.layui-layer{ -webkit-overflow-scrolling:touch;top:150px;left:0;margin:0;padding:0;background-color:#fff;-webkit-background-clip:content;box-shadow:1px 1px 50px rgba(0,0,0,.3);border-radius:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.3s;animation-duration:.3s}.layui-layer-close{ position:absolute}.layui-layer-content{ position:relative}.layui-layer-border{ border:1px solid #B2B2B2;border:1px solid rgba(0,0,0,.3);box-shadow:1px 1px 5px rgba(0,0,0,.2)}.layui-layer-moves{ position:absolute;border:3px solid #666;border:3px solid rgba(0,0,0,.5);cursor:move;background-color:#fff;background-color:rgba(255,255,255,.3);filter:alpha(opacity=50)}.layui-layer-load{ background:url(default/loading-0.gif) center center no-repeat #fff}.layui-layer-ico{ background:url(default/icon.png) no-repeat}.layui-layer-btn a,.layui-layer-dialog .layui-layer-ico,.layui-layer-setwin a{ display:inline-block;*display:inline;*zoom:1;vertical-align:top}@-webkit-keyframes bounceIn{ 0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{ opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{ 0%{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5)}100%{ opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim{ -webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceOut{ 100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}30%{ -webkit-transform:scale(1.03);transform:scale(1.03)}0%{ -webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceOut{ 100%{opacity:0;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}30%{ -webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)}0%{ -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim-close{ -webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.2s;animation-duration:.2s}@-webkit-keyframes zoomInDown{ 0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{ opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInDown{ 0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{ opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{ -webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes fadeInUpBig{ 0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{ opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{ 0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{ opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{ -webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes zoomInLeft{ 0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{ opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes zoomInLeft{ 0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{ opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{ -webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes rollIn{ 0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{ opacity:1;-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}@keyframes rollIn{ 0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{ opacity:1;-webkit-transform:translateX(0) rotate(0);-ms-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}}.layer-anim-04{ -webkit-animation-name:rollIn;animation-name:rollIn}@keyframes fadeIn{ 0%{opacity:0}100%{ opacity:1}}.layer-anim-05{ -webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes shake{ 0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{ -webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{ -webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{ 0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{ -webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{ -webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{ -webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes fadeIn{ 0%{opacity:0}100%{ opacity:1}}.layui-layer-title{ padding:0 80px 0 20px;height:42px;line-height:42px;border-bottom:1px solid #eee;font-size:14px;color:#333;overflow:hidden;background-color:#F8F8F8;border-radius:2px 2px 0 0}.layui-layer-setwin{ position:absolute;right:15px;*right:0;top:15px;font-size:0;line-height:initial}.layui-layer-setwin a{ position:relative;width:16px;height:16px;margin-left:10px;font-size:12px;_overflow:hidden}.layui-layer-setwin .layui-layer-min cite{ position:absolute;width:14px;height:2px;left:0;top:50%;margin-top:-1px;background-color:#2E2D3C;cursor:pointer;_overflow:hidden}.layui-layer-setwin .layui-layer-min:hover cite{ background-color:#2D93CA}.layui-layer-setwin .layui-layer-max{ background-position:-32px -40px}.layui-layer-setwin .layui-layer-max:hover{ background-position:-16px -40px}.layui-layer-setwin .layui-layer-maxmin{ background-position:-65px -40px}.layui-layer-setwin .layui-layer-maxmin:hover{ background-position:-49px -40px}.layui-layer-setwin .layui-layer-close1{ background-position:0 -40px;cursor:pointer}.layui-layer-setwin .layui-layer-close1:hover{ opacity:.7}.layui-layer-setwin .layui-layer-close2{ position:absolute;right:-28px;top:-28px;width:30px;height:30px;margin-left:0;background-position:-149px -31px;*right:-18px;_display:none}.layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px}.layui-layer-btn{ text-align:right;padding:0 10px 12px;pointer-events:auto}.layui-layer-btn a{ height:28px;line-height:28px;margin:0 6px;padding:0 15px;border:1px solid #dedede;background-color:#f1f1f1;color:#333;border-radius:2px;font-weight:400;cursor:pointer;text-decoration:none}.layui-layer-btn a:hover{ opacity:.9;text-decoration:none}.layui-layer-btn a:active{ opacity:.7}.layui-layer-btn .layui-layer-btn0{ border-color:#4898d5;background-color:#2e8ded;color:#fff}.layui-layer-dialog{ min-width:260px}.layui-layer-dialog .layui-layer-content{ position:relative;padding:20px;line-height:24px;word-break:break-all;overflow:hidden;font-size:14px;overflow-x:hidden;overflow-y:auto}.layui-layer-dialog .layui-layer-content .layui-layer-ico{ position:absolute;top:16px;left:15px;_left:-40px;width:30px;height:30px}.layui-layer-ico1{ background-position:-30px 0}.layui-layer-ico2{ background-position:-60px 0}.layui-layer-ico3{ background-position:-90px 0}.layui-layer-ico4{ background-position:-120px 0}.layui-layer-ico5{ background-position:-150px 0}.layui-layer-ico6{ background-position:-180px 0}.layui-layer-rim{ border:6px solid #8D8D8D;border:6px solid rgba(0,0,0,.3);border-radius:5px;box-shadow:none}.layui-layer-msg{ min-width:180px;border:1px solid #D3D4D3;box-shadow:none}.layui-layer-hui{ min-width:100px;background-color:#000;filter:alpha(opacity=60);background-color:rgba(0,0,0,.6);color:#fff;border:none}.layui-layer-hui .layui-layer-content{ padding:12px 25px;text-align:center}.layui-layer-dialog .layui-layer-padding{ padding:20px 20px 20px 55px;text-align:left}.layui-layer-page .layui-layer-content{ position:relative;overflow:auto}.layui-layer-iframe .layui-layer-btn,.layui-layer-page .layui-layer-btn{ padding-top:10px}.layui-layer-nobg{ background:0 0}.layui-layer-iframe .layui-layer-content{ overflow:hidden}.layui-layer-iframe iframe{ display:block;width:100%}.layui-layer-loading{ border-radius:100%;background:0 0;box-shadow:none;border:none}.layui-layer-loading .layui-layer-content{ width:60px;height:24px;background:url(default/loading-0.gif) no-repeat}.layui-layer-loading .layui-layer-loading1{ width:37px;height:37px;background:url(default/loading-1.gif) no-repeat}.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2{ width:32px;height:32px;background:url(default/loading-2.gif) no-repeat}.layui-layer-tips{ background:0 0;box-shadow:none;border:none}.layui-layer-tips .layui-layer-content{ position:relative;line-height:22px;min-width:12px;padding:5px 10px;font-size:12px;_float:left;border-radius:3px;box-shadow:1px 1px 3px rgba(0,0,0,.3);background-color:#F90;color:#fff}.layui-layer-tips .layui-layer-close{ right:-2px;top:-1px}.layui-layer-tips i.layui-layer-TipsG{ position:absolute;width:0;height:0;border-width:8px;border-color:transparent;border-style:dashed;*overflow:hidden}.layui-layer-tips i.layui-layer-TipsB,.layui-layer-tips i.layui-layer-TipsT{ left:5px;border-right-style:solid;border-right-color:#F90}.layui-layer-tips i.layui-layer-TipsT{ bottom:-8px}.layui-layer-tips i.layui-layer-TipsB{ top:-8px}.layui-layer-tips i.layui-layer-TipsL,.layui-layer-tips i.layui-layer-TipsR{ top:1px;border-bottom-style:solid;border-bottom-color:#F90}.layui-layer-tips i.layui-layer-TipsR{ left:-8px}.layui-layer-tips i.layui-layer-TipsL{ right:-8px}.layui-layer-lan[type=dialog]{ min-width:280px}.layui-layer-lan .layui-layer-title{ background:#4476A7;color:#fff;border:none}.layui-layer-lan .layui-layer-btn{ padding:10px;text-align:right;border-top:1px solid #E9E7E7}.layui-layer-lan .layui-layer-btn a{ background:#BBB5B5;border:none}.layui-layer-lan .layui-layer-btn .layui-layer-btn1{ background:#C9C5C5}.layui-layer-molv .layui-layer-title{ background:#009f95;color:#fff;border:none}.layui-layer-molv .layui-layer-btn a{ background:#009f95}.layui-layer-molv .layui-layer-btn .layui-layer-btn1{ background:#92B8B1}.layui-layer-iconext{ background:url(default/icon-ext.png) no-repeat}.layui-layer-prompt .layui-layer-input{ display:block;width:220px;height:30px;margin:0 auto;line-height:30px;padding:0 5px;border:1px solid #ccc;box-shadow:1px 1px 5px rgba(0,0,0,.1) inset;color:#333}.layui-layer-prompt textarea.layui-layer-input{ width:300px;height:100px;line-height:20px}.layui-layer-tab{ box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{ padding-left:0;border-bottom:1px solid #ccc;background-color:#eee;overflow:visible}.layui-layer-tab .layui-layer-title span{ position:relative;float:left;min-width:80px;max-width:260px;padding:0 20px;text-align:center;cursor:default;overflow:hidden}.layui-layer-tab .layui-layer-title span.layui-layer-tabnow{ height:43px;border-left:1px solid #ccc;border-right:1px solid #ccc;background-color:#fff;z-index:10}.layui-layer-tab .layui-layer-title span:first-child{ border-left:none}.layui-layer-tabmain{ line-height:24px;clear:both}.layui-layer-tabmain .layui-layer-tabli{ display:none}.layui-layer-tabmain .layui-layer-tabli.xubox_tab_layer{ display:block}.xubox_tabclose{ position:absolute;right:10px;top:5px;cursor:pointer}.layui-layer-photos{ -webkit-animation-duration:1s;animation-duration:1s}.layui-layer-photos .layui-layer-content{ overflow:hidden;text-align:center}.layui-layer-photos .layui-layer-phimg img{ position:relative;width:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:top}.layui-layer-imgbar,.layui-layer-imguide{ display:none}.layui-layer-imgnext,.layui-layer-imgprev{ position:absolute;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;blr:expression(this.onFocus=this.blur())}.layui-layer-imgprev{ left:10px;background-position:-5px -5px;_background-position:-70px -5px}.layui-layer-imgprev:hover{ background-position:-33px -5px;_background-position:-120px -5px}.layui-layer-imgnext{ right:10px;_right:8px;background-position:-5px -50px;_background-position:-70px -50px}.layui-layer-imgnext:hover{ background-position:-33px -50px;_background-position:-120px -50px}.layui-layer-imgbar{ position:absolute;left:0;bottom:0;width:100%;height:32px;line-height:32px;background-color:rgba(0,0,0,.8);background-color:#000\9;filter:Alpha(opacity=80);color:#fff;overflow:hidden;font-size:0}.layui-layer-imgtit *{ display:inline-block;*display:inline;*zoom:1;vertical-align:top;font-size:12px}.layui-layer-imgtit a{ max-width:65%;overflow:hidden;color:#fff}.layui-layer-imgtit a:hover{ color:#fff;text-decoration:underline}.layui-layer-imgtit em{ padding-left:10px;font-style:normal}
icon文件
