Repository: layui/layer Branch: master Commit: 7baa8a04a996 Files: 18 Total size: 123.6 KB Directory structure: gitextract_i1kf_row/ ├── .gitignore ├── LICENSE ├── README.md ├── dist/ │ ├── layer.js │ ├── mobile/ │ │ ├── layer.js │ │ └── need/ │ │ └── layer.css │ └── theme/ │ ├── default/ │ │ └── layer.css │ └── moon/ │ └── style.css ├── gulpfile.js ├── package.json ├── src/ │ ├── README.md │ ├── layer.js │ ├── mobile/ │ │ ├── README.md │ │ ├── layer.js │ │ └── need/ │ │ └── layer.css │ └── theme/ │ ├── default/ │ │ └── layer.css │ └── moon/ │ └── style.css └── test/ └── demo.html ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ 1.8.5/ *.iml .idea/ .ipr .iws *~ ~* *.diff *.patch *.bak .DS_Store Thumbs.db .svn/ *.swp .nojekyll .project .settings/ node_modules/ _site/ .npmignore release/ skin/moon/ src/skin/moon/ ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2016 layui Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ ## 📣 提示 **layer 组件已完全集成到 Layui 中，不再做单独维护。建议直接使用 layui 中 layer。** > layer 文档：https://layui.dev/docs/layer/ ## 概要 layer 是一款历来都备受青睐的 Web 弹出层组件，具备全方位的解决方案，面向的是各个水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。在与同类组件的比较中，layer 会更能被开发者所选择。这不仅是凭「脸」取胜，而是它尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性，layer 甚至还兼容了包括 IE6 在内的所有主流浏览器。其数量可观的基础属性和方法，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。当然，这种「王婆卖瓜」的陈述听起来总是有点难受，因此你需要进一步了解她是否真的如你所愿。 [文档与演示](http://layui.dev/docs/2/layer/) ## 愿景 成为网页弹出层的首先交互方案 ## 影响 因着数年的坚持维护，layer 已被运用在不计其数 Web 平台，几乎所处可见，其中还不乏众多知名大型网站。layer 已被国内乃至全世界至少数十万的开发者所使用过。 ================================================ FILE: dist/layer.js ================================================ /*! layer-v3.5.1 Web 通用弹出层组件 MIT License */ ;!function(e,t){"use strict";var i,n,a=e.layui&&layui.define,o={getPath:function(){var t=document.currentScript?document.currentScript.src:function(){for(var e,t=document.scripts,i=t.length-1,n=i;n>0;n--)if("interactive"===t[n].readyState){e=t[n].src;break}return e||t[i].src}(),i=e.LAYUI_GLOBAL||{};return i.layer_dir||t.substring(0,t.lastIndexOf("/")+1)}(),config:{},end:{},minIndex:0,minLeft:[],btn:["确定","取消"],type:["dialog","page","iframe","loading","tips"],getStyle:function(t,i){var n=t.currentStyle?t.currentStyle:e.getComputedStyle(t,null);return n[n.getPropertyValue?"getPropertyValue":"getAttribute"](i)},link:function(t,i,n){if(r.path){var a=document.getElementsByTagName("head")[0],s=document.createElement("link");"string"==typeof i&&(n=i);var l=(n||t).replace(/\.|\//g,""),f="layuicss-"+l,c="creating",u=0;s.rel="stylesheet",s.href=r.path+t,s.id=f,document.getElementById(f)||a.appendChild(s),"function"==typeof i&&!function d(t){var n=100,a=document.getElementById(f);return++u>1e4/n?e.console&&console.error(l+".css: Invalid"):void(1989===parseInt(o.getStyle(a,"width"))?(t===c&&a.removeAttribute("lay-status"),a.getAttribute("lay-status")===c?setTimeout(d,n):i()):(a.setAttribute("lay-status",c),setTimeout(function(){d(c)},n)))}()}}},r={v:"3.5.1",ie:function(){var t=navigator.userAgent.toLowerCase();return!!(e.ActiveXObject||"ActiveXObject"in e)&&((t.match(/msie\s(\d+)/)||[])[1]||"11")}(),index:e.layer&&e.layer.v?1e5:0,path:o.getPath,config:function(e,t){return e=e||{},r.cache=o.config=i.extend({},o.config,e),r.path=o.config.path||r.path,"string"==typeof e.extend&&(e.extend=[e.extend]),o.config.path&&r.ready(),e.extend?(a?layui.addcss("modules/layer/"+e.extend):o.link("theme/"+e.extend),this):this},ready:function(e){var t="layer",i="",n=(a?"modules/layer/":"theme/")+"default/layer.css?v="+r.v+i;return a?layui.addcss(n,e,t):o.link(n,e,t),this},alert:function(e,t,n){var a="function"==typeof t;return a&&(n=t),r.open(i.extend({content:e,yes:n},a?{}:t))},confirm:function(e,t,n,a){var s="function"==typeof t;return s&&(a=n,n=t),r.open(i.extend({content:e,btn:o.btn,yes:n,btn2:a},s?{}:t))},msg:function(e,n,a){var s="function"==typeof n,f=o.config.skin,c=(f?f+" "+f+"-msg":"")||"layui-layer-msg",u=l.anim.length-1;return s&&(a=n),r.open(i.extend({content:e,time:3e3,shade:!1,skin:c,title:!1,closeBtn:!1,btn:!1,resize:!1,end:a},s&&!o.config.skin?{skin:c+" layui-layer-hui",anim:u}:function(){return n=n||{},(n.icon===-1||n.icon===t&&!o.config.skin)&&(n.skin=c+" "+(n.skin||"layui-layer-hui")),n}()))},load:function(e,t){return r.open(i.extend({type:3,icon:e||0,resize:!1,shade:.01},t))},tips:function(e,t,n){return r.open(i.extend({type:4,content:[e,t],closeBtn:!1,time:3e3,shade:!1,resize:!1,fixed:!1,maxWidth:260},n))}},s=function(e){var t=this,a=function(){t.creat()};t.index=++r.index,t.config.maxWidth=i(n).width()-30,t.config=i.extend({},t.config,o.config,e),document.body?a():setTimeout(function(){a()},30)};s.pt=s.prototype;var l=["layui-layer",".layui-layer-title",".layui-layer-main",".layui-layer-dialog","layui-layer-iframe","layui-layer-content","layui-layer-btn","layui-layer-close"];l.anim=["layer-anim-00","layer-anim-01","layer-anim-02","layer-anim-03","layer-anim-04","layer-anim-05","layer-anim-06"],l.SHADE="layui-layer-shade",l.MOVE="layui-layer-move",s.pt.config={type:0,shade:.3,fixed:!0,move:l[1],title:"信息",offset:"auto",area:"auto",closeBtn:1,time:0,zIndex:19891014,maxWidth:360,anim:0,isOutAnim:!0,minStack:!0,icon:-1,moveType:1,resize:!0,scrollbar:!0,tips:2},s.pt.vessel=function(e,t){var n=this,a=n.index,r=n.config,s=r.zIndex+a,f="object"==typeof r.title,c=r.maxmin&&(1===r.type||2===r.type),u=r.title?'
'+(f?r.title[0]:r.title)+"
":"";return r.zIndex=s,t([r.shade?'
':"",'
'+(e&&2!=r.type?"":u)+'
'+(0==r.type&&r.icon!==-1?'':"")+(1==r.type&&e?"":r.content||"")+'
'+function(){var e=c?'':"";return r.closeBtn&&(e+=''),e}()+""+(r.btn?function(){var e="";"string"==typeof r.btn&&(r.btn=[r.btn]);for(var t=0,i=r.btn.length;t'+r.btn[t]+"";return'
'+e+"
"}():"")+(r.resize?'':"")+"
"],u,i('
')),n},s.pt.creat=function(){var e=this,t=e.config,a=e.index,s=t.content,f="object"==typeof s,c=i("body");if(!t.id||!i("#"+t.id)[0]){switch("string"==typeof t.area&&(t.area="auto"===t.area?["",""]:[t.area,""]),t.shift&&(t.anim=t.shift),6==r.ie&&(t.fixed=!1),t.type){case 0:t.btn="btn"in t?t.btn:o.btn[0],r.closeAll("dialog");break;case 2:var s=t.content=f?t.content:[t.content||"","auto"];t.content='';break;case 3:delete t.title,delete t.closeBtn,t.icon===-1&&0===t.icon,r.closeAll("loading");break;case 4:f||(t.content=[t.content,"body"]),t.follow=t.content[1],t.content=t.content[0]+'',delete t.title,t.tips="object"==typeof t.tips?t.tips:[t.tips,!0],t.tipsMore||r.closeAll("tips")}if(e.vessel(f,function(n,r,u){c.append(n[0]),f?function(){2==t.type||4==t.type?function(){i("body").append(n[1])}():function(){s.parents("."+l[0])[0]||(s.data("display",s.css("display")).show().addClass("layui-layer-wrap").wrap(n[1]),i("#"+l[0]+a).find("."+l[5]).before(r))}()}():c.append(n[1]),i("#"+l.MOVE)[0]||c.append(o.moveElem=u),e.layero=i("#"+l[0]+a),e.shadeo=i("#"+l.SHADE+a),t.scrollbar||l.html.css("overflow","hidden").attr("layer-full",a)}).auto(a),e.shadeo.css({"background-color":t.shade[1]||"#000",opacity:t.shade[0]||t.shade}),2==t.type&&6==r.ie&&e.layero.find("iframe").attr("src",s[0]),4==t.type?e.tips():function(){e.offset(),parseInt(o.getStyle(document.getElementById(l.MOVE),"z-index"))||function(){e.layero.css("visibility","hidden"),r.ready(function(){e.offset(),e.layero.css("visibility","visible")})}()}(),t.fixed&&n.on("resize",function(){e.offset(),(/^\d+%$/.test(t.area[0])||/^\d+%$/.test(t.area[1]))&&e.auto(a),4==t.type&&e.tips()}),t.time<=0||setTimeout(function(){r.close(e.index)},t.time),e.move().callback(),l.anim[t.anim]){var u="layer-anim "+l.anim[t.anim];e.layero.addClass(u).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){i(this).removeClass(u)})}t.isOutAnim&&e.layero.data("isOutAnim",!0)}},s.pt.auto=function(e){var t=this,a=t.config,o=i("#"+l[0]+e);""===a.area[0]&&a.maxWidth>0&&(r.ie&&r.ie<8&&a.btn&&o.width(o.innerWidth()),o.outerWidth()>a.maxWidth&&o.width(a.maxWidth));var s=[o.innerWidth(),o.innerHeight()],f=o.find(l[1]).outerHeight()||0,c=o.find("."+l[6]).outerHeight()||0,u=function(e){e=o.find(e),e.height(s[1]-f-c-2*(0|parseFloat(e.css("padding-top"))))};switch(a.type){case 2:u("iframe");break;default:""===a.area[1]?a.maxHeight>0&&o.outerHeight()>a.maxHeight?(s[1]=a.maxHeight,u("."+l[5])):a.fixed&&s[1]>=n.height()&&(s[1]=n.height(),u("."+l[5])):u("."+l[5])}return t},s.pt.offset=function(){var e=this,t=e.config,i=e.layero,a=[i.outerWidth(),i.outerHeight()],o="object"==typeof t.offset;e.offsetTop=(n.height()-a[1])/2,e.offsetLeft=(n.width()-a[0])/2,o?(e.offsetTop=t.offset[0],e.offsetLeft=t.offset[1]||e.offsetLeft):"auto"!==t.offset&&("t"===t.offset?e.offsetTop=0:"r"===t.offset?e.offsetLeft=n.width()-a[0]:"b"===t.offset?e.offsetTop=n.height()-a[1]:"l"===t.offset?e.offsetLeft=0:"lt"===t.offset?(e.offsetTop=0,e.offsetLeft=0):"lb"===t.offset?(e.offsetTop=n.height()-a[1],e.offsetLeft=0):"rt"===t.offset?(e.offsetTop=0,e.offsetLeft=n.width()-a[0]):"rb"===t.offset?(e.offsetTop=n.height()-a[1],e.offsetLeft=n.width()-a[0]):e.offsetTop=t.offset),t.fixed||(e.offsetTop=/%$/.test(e.offsetTop)?n.height()*parseFloat(e.offsetTop)/100:parseFloat(e.offsetTop),e.offsetLeft=/%$/.test(e.offsetLeft)?n.width()*parseFloat(e.offsetLeft)/100:parseFloat(e.offsetLeft),e.offsetTop+=n.scrollTop(),e.offsetLeft+=n.scrollLeft()),i.attr("minLeft")&&(e.offsetTop=n.height()-(i.find(l[1]).outerHeight()||0),e.offsetLeft=i.css("left")),i.css({top:e.offsetTop,left:e.offsetLeft})},s.pt.tips=function(){var e=this,t=e.config,a=e.layero,o=[a.outerWidth(),a.outerHeight()],r=i(t.follow);r[0]||(r=i("body"));var s={width:r.outerWidth(),height:r.outerHeight(),top:r.offset().top,left:r.offset().left},f=a.find(".layui-layer-TipsG"),c=t.tips[0];t.tips[1]||f.remove(),s.autoLeft=function(){s.left+o[0]-n.width()>0?(s.tipLeft=s.left+s.width-o[0],f.css({right:12,left:"auto"})):s.tipLeft=s.left},s.where=[function(){s.autoLeft(),s.tipTop=s.top-o[1]-10,f.removeClass("layui-layer-TipsB").addClass("layui-layer-TipsT").css("border-right-color",t.tips[1])},function(){s.tipLeft=s.left+s.width+10,s.tipTop=s.top,f.removeClass("layui-layer-TipsL").addClass("layui-layer-TipsR").css("border-bottom-color",t.tips[1])},function(){s.autoLeft(),s.tipTop=s.top+s.height+10,f.removeClass("layui-layer-TipsT").addClass("layui-layer-TipsB").css("border-right-color",t.tips[1])},function(){s.tipLeft=s.left-o[0]-10,s.tipTop=s.top,f.removeClass("layui-layer-TipsR").addClass("layui-layer-TipsL").css("border-bottom-color",t.tips[1])}],s.where[c-1](),1===c?s.top-(n.scrollTop()+o[1]+16)<0&&s.where[2]():2===c?n.width()-(s.left+s.width+o[0]+16)>0||s.where[3]():3===c?s.top-n.scrollTop()+s.height+o[1]+16-n.height()>0&&s.where[0]():4===c&&o[0]+16-s.left>0&&s.where[1](),a.find("."+l[5]).css({"background-color":t.tips[1],"padding-right":t.closeBtn?"30px":""}),a.css({left:s.tipLeft-(t.fixed?n.scrollLeft():0),top:s.tipTop-(t.fixed?n.scrollTop():0)})},s.pt.move=function(){var e=this,t=e.config,a=i(document),s=e.layero,l=s.find(t.move),f=s.find(".layui-layer-resize"),c={};return t.move&&l.css("cursor","move"),l.on("mousedown",function(e){e.preventDefault(),t.move&&(c.moveStart=!0,c.offset=[e.clientX-parseFloat(s.css("left")),e.clientY-parseFloat(s.css("top"))],o.moveElem.css("cursor","move").show())}),f.on("mousedown",function(e){e.preventDefault(),c.resizeStart=!0,c.offset=[e.clientX,e.clientY],c.area=[s.outerWidth(),s.outerHeight()],o.moveElem.css("cursor","se-resize").show()}),a.on("mousemove",function(i){if(c.moveStart){var a=i.clientX-c.offset[0],o=i.clientY-c.offset[1],l="fixed"===s.css("position");if(i.preventDefault(),c.stX=l?0:n.scrollLeft(),c.stY=l?0:n.scrollTop(),!t.moveOut){var f=n.width()-s.outerWidth()+c.stX,u=n.height()-s.outerHeight()+c.stY;af&&(a=f),ou&&(o=u)}s.css({left:a,top:o})}if(t.resize&&c.resizeStart){var a=i.clientX-c.offset[0],o=i.clientY-c.offset[1];i.preventDefault(),r.style(e.index,{width:c.area[0]+a,height:c.area[1]+o}),c.isResize=!0,t.resizing&&t.resizing(s)}}).on("mouseup",function(e){c.moveStart&&(delete c.moveStart,o.moveElem.hide(),t.moveEnd&&t.moveEnd(s)),c.resizeStart&&(delete c.resizeStart,o.moveElem.hide())}),e},s.pt.callback=function(){function e(){var e=a.cancel&&a.cancel(t.index,n);e===!1||r.close(t.index)}var t=this,n=t.layero,a=t.config;t.openLayer(),a.success&&(2==a.type?n.find("iframe").on("load",function(){a.success(n,t.index)}):a.success(n,t.index)),6==r.ie&&t.IE6(n),n.find("."+l[6]).children("a").on("click",function(){var e=i(this).index();if(0===e)a.yes?a.yes(t.index,n):a.btn1?a.btn1(t.index,n):r.close(t.index);else{var o=a["btn"+(e+1)]&&a["btn"+(e+1)](t.index,n);o===!1||r.close(t.index)}}),n.find("."+l[7]).on("click",e),a.shadeClose&&t.shadeo.on("click",function(){r.close(t.index)}),n.find(".layui-layer-min").on("click",function(){var e=a.min&&a.min(n,t.index);e===!1||r.min(t.index,a)}),n.find(".layui-layer-max").on("click",function(){i(this).hasClass("layui-layer-maxmin")?(r.restore(t.index),a.restore&&a.restore(n,t.index)):(r.full(t.index,a),setTimeout(function(){a.full&&a.full(n,t.index)},100))}),a.end&&(o.end[t.index]=a.end)},o.reselect=function(){i.each(i("select"),function(e,t){var n=i(this);n.parents("."+l[0])[0]||1==n.attr("layer")&&i("."+l[0]).length<1&&n.removeAttr("layer").show(),n=null})},s.pt.IE6=function(e){i("select").each(function(e,t){var n=i(this);n.parents("."+l[0])[0]||"none"===n.css("display")||n.attr({layer:"1"}).hide(),n=null})},s.pt.openLayer=function(){var e=this;r.zIndex=e.config.zIndex,r.setTop=function(e){var t=function(){r.zIndex++,e.css("z-index",r.zIndex+1)};return r.zIndex=parseInt(e[0].style.zIndex),e.on("mousedown",t),r.zIndex}},o.record=function(e){var t=[e.width(),e.height(),e.position().top,e.position().left+parseFloat(e.css("margin-left"))];e.find(".layui-layer-max").addClass("layui-layer-maxmin"),e.attr({area:t})},o.rescollbar=function(e){l.html.attr("layer-full")==e&&(l.html[0].style.removeProperty?l.html[0].style.removeProperty("overflow"):l.html[0].style.removeAttribute("overflow"),l.html.removeAttr("layer-full"))},e.layer=r,r.getChildFrame=function(e,t){return t=t||i("."+l[4]).attr("times"),i("#"+l[0]+t).find("iframe").contents().find(e)},r.getFrameIndex=function(e){return i("#"+e).parents("."+l[4]).attr("times")},r.iframeAuto=function(e){if(e){var t=r.getChildFrame("html",e).outerHeight(),n=i("#"+l[0]+e),a=n.find(l[1]).outerHeight()||0,o=n.find("."+l[6]).outerHeight()||0;n.css({height:t+a+o}),n.find("iframe").css({height:t})}},r.iframeSrc=function(e,t){i("#"+l[0]+e).find("iframe").attr("src",t)},r.style=function(e,t,n){var a=i("#"+l[0]+e),r=a.find(".layui-layer-content"),s=a.attr("type"),f=a.find(l[1]).outerHeight()||0,c=a.find("."+l[6]).outerHeight()||0;a.attr("minLeft");s!==o.type[3]&&s!==o.type[4]&&(n||(parseFloat(t.width)<=260&&(t.width=260),parseFloat(t.height)-f-c<=64&&(t.height=64+f+c)),a.css(t),c=a.find("."+l[6]).outerHeight(),s===o.type[2]?a.find("iframe").css({height:parseFloat(t.height)-f-c}):r.css({height:parseFloat(t.height)-f-c-parseFloat(r.css("padding-top"))-parseFloat(r.css("padding-bottom"))}))},r.min=function(e,t){t=t||{};var a=i("#"+l[0]+e),s=i("#"+l.SHADE+e),f=a.find(l[1]).outerHeight()||0,c=a.attr("minLeft")||181*o.minIndex+"px",u=a.css("position"),d={width:180,height:f,position:"fixed",overflow:"hidden"};o.record(a),o.minLeft[0]&&(c=o.minLeft[0],o.minLeft.shift()),t.minStack&&(d.left=c,d.top=n.height()-f,a.attr("minLeft")||o.minIndex++,a.attr("minLeft",c)),a.attr("position",u),r.style(e,d,!0),a.find(".layui-layer-min").hide(),"page"===a.attr("type")&&a.find(l[4]).hide(),o.rescollbar(e),s.hide()},r.restore=function(e){var t=i("#"+l[0]+e),n=i("#"+l.SHADE+e),a=t.attr("area").split(",");t.attr("type");r.style(e,{width:parseFloat(a[0]),height:parseFloat(a[1]),top:parseFloat(a[2]),left:parseFloat(a[3]),position:t.attr("position"),overflow:"visible"},!0),t.find(".layui-layer-max").removeClass("layui-layer-maxmin"),t.find(".layui-layer-min").show(),"page"===t.attr("type")&&t.find(l[4]).show(),o.rescollbar(e),n.show()},r.full=function(e){var t,a=i("#"+l[0]+e);o.record(a),l.html.attr("layer-full")||l.html.css("overflow","hidden").attr("layer-full",e),clearTimeout(t),t=setTimeout(function(){var t="fixed"===a.css("position");r.style(e,{top:t?0:n.scrollTop(),left:t?0:n.scrollLeft(),width:n.width(),height:n.height()},!0),a.find(".layui-layer-min").hide()},100)},r.title=function(e,t){var n=i("#"+l[0]+(t||r.index)).find(l[1]);n.html(e)},r.close=function(e,t){var n=i("#"+l[0]+e),a=n.attr("type"),s="layer-anim-close";if(n[0]){var f="layui-layer-wrap",c=function(){if(a===o.type[1]&&"object"===n.attr("conType")){n.children(":not(."+l[5]+")").remove();for(var r=n.find("."+f),s=0;s<2;s++)r.unwrap();r.css("display",r.data("display")).removeClass(f)}else{if(a===o.type[2])try{var c=i("#"+l[4]+e)[0];c.contentWindow.document.write(""),c.contentWindow.close(),n.find("."+l[5])[0].removeChild(c)}catch(u){}n[0].innerHTML="",n.remove()}"function"==typeof o.end[e]&&o.end[e](),delete o.end[e],"function"==typeof t&&t()};n.data("isOutAnim")&&n.addClass("layer-anim "+s),i("#layui-layer-moves, #"+l.SHADE+e).remove(),6==r.ie&&o.reselect(),o.rescollbar(e),n.attr("minLeft")&&(o.minIndex--,o.minLeft.push(n.attr("minLeft"))),r.ie&&r.ie<10||!n.data("isOutAnim")?c():setTimeout(function(){c()},200)}},r.closeAll=function(e,t){"function"==typeof e&&(t=e,e=null);var n=i("."+l[0]);i.each(n,function(a){var o=i(this),s=e?o.attr("type")===e:1;s&&r.close(o.attr("times"),a===n.length-1?t:null),s=null}),0===n.length&&"function"==typeof t&&t()};var f=r.cache||{},c=function(e){return f.skin?" "+f.skin+" "+f.skin+"-"+e:""};r.prompt=function(e,t){var a="";if(e=e||{},"function"==typeof e&&(t=e),e.area){var o=e.area;a='style="width: '+o[0]+"; height: "+o[1]+';"',delete e.area}var s,l=2==e.formType?'":function(){return''}(),f=e.success;return delete e.success,r.open(i.extend({type:1,btn:["确定","取消"],content:l,skin:"layui-layer-prompt"+c("prompt"),maxWidth:n.width(),success:function(t){s=t.find(".layui-layer-input"),s.val(e.value||"").focus(),"function"==typeof f&&f(t)},resize:!1,yes:function(i){var n=s.val();""===n?s.focus():n.length>(e.maxlength||500)?r.tips("最多输入"+(e.maxlength||500)+"个字数",s,{tips:1}):t&&t(n,i,s)}},e))},r.tab=function(e){e=e||{};var t=e.tab||{},n="layui-this",a=e.success;return delete e.success,r.open(i.extend({type:1,skin:"layui-layer-tab"+c("tab"),resize:!1,title:function(){var e=t.length,i=1,a="";if(e>0)for(a=''+t[0].title+"";i"+t[i].title+"";return a}(),content:'
    '+function(){var e=t.length,i=1,a="";if(e>0)for(a='
  • '+(t[0].content||"no content")+"
    • ";i'+(t[i].content||"no content")+"";return a}()+"
",success:function(t){var o=t.find(".layui-layer-title").children(),r=t.find(".layui-layer-tabmain").children();o.on("mousedown",function(t){t.stopPropagation?t.stopPropagation():t.cancelBubble=!0;var a=i(this),o=a.index();a.addClass(n).siblings().removeClass(n),r.eq(o).show().siblings().hide(),"function"==typeof e.change&&e.change(o)}),"function"==typeof a&&a(t)}},e))},r.photos=function(t,n,a){function o(e,t,i){var n=new Image;return n.src=e,n.complete?t(n):(n.onload=function(){n.onload=null,t(n)},void(n.onerror=function(e){n.onerror=null,i(e)}))}var s={};if(t=t||{},t.photos){var l=!("string"==typeof t.photos||t.photos instanceof i),f=l?t.photos:{},u=f.data||[],d=f.start||0;s.imgIndex=(0|d)+1,t.img=t.img||"img";var y=t.success;if(delete t.success,l){if(0===u.length)return r.msg("没有图片")}else{var p=i(t.photos),h=function(){u=[],p.find(t.img).each(function(e){var t=i(this);t.attr("layer-index",e),u.push({alt:t.attr("alt"),pid:t.attr("layer-pid"),src:t.attr("layer-src")||t.attr("src"),thumb:t.attr("src")})})};if(h(),0===u.length)return;if(n||p.on("click",t.img,function(){h();var e=i(this),n=e.attr("layer-index");r.photos(i.extend(t,{photos:{start:n,data:u,tab:t.tab},full:t.full}),!0)}),!n)return}s.imgprev=function(e){s.imgIndex--,s.imgIndex<1&&(s.imgIndex=u.length),s.tabimg(e)},s.imgnext=function(e,t){s.imgIndex++,s.imgIndex>u.length&&(s.imgIndex=1,t)||s.tabimg(e)},s.keyup=function(e){if(!s.end){var t=e.keyCode;e.preventDefault(),37===t?s.imgprev(!0):39===t?s.imgnext(!0):27===t&&r.close(s.index)}},s.tabimg=function(e){if(!(u.length<=1))return f.start=s.imgIndex-1,r.close(s.index),r.photos(t,!0,e)},s.event=function(){s.bigimg.find(".layui-layer-imgprev").on("click",function(e){e.preventDefault(),s.imgprev(!0)}),s.bigimg.find(".layui-layer-imgnext").on("click",function(e){e.preventDefault(),s.imgnext(!0)}),i(document).on("keyup",s.keyup)},s.loadi=r.load(1,{shade:!("shade"in t)&&.9,scrollbar:!1}),o(u[d].src,function(n){r.close(s.loadi),a&&(t.anim=-1),s.index=r.open(i.extend({type:1,id:"layui-layer-photos",area:function(){var a=[n.width,n.height],o=[i(e).width()-100,i(e).height()-100];if(!t.full&&(a[0]>o[0]||a[1]>o[1])){var r=[a[0]/o[0],a[1]/o[1]];r[0]>r[1]?(a[0]=a[0]/r[0],a[1]=a[1]/r[0]):r[0]'+(u[d].alt||'+function(){return u.length>1?'
'+(u[d].alt||"")+""+s.imgIndex+" / "+u.length+"
":""}()+"",success:function(e,i){s.bigimg=e.find(".layui-layer-phimg"),s.imgsee=e.find(".layui-layer-imgbar"),s.event(e),t.tab&&t.tab(u[d],e),"function"==typeof y&&y(e)},end:function(){s.end=!0,i(document).off("keyup",s.keyup)}},t))},function(){r.close(s.loadi),r.msg("当前图片地址异常
是否继续查看下一张？",{time:3e4,btn:["下一张","不看了"],yes:function(){u.length>1&&s.imgnext(!0,!0)}})})}},o.run=function(t){i=t,n=i(e),l.html=i("html"),r.open=function(e){var t=new s(e);return t.index}},e.layui&&layui.define?(r.ready(),layui.define("jquery",function(t){r.path=layui.cache.dir,o.run(layui.$),e.layer=r,t("layer",r)})):"function"==typeof define&&define.amd?define(["jquery"],function(){return o.run(e.jQuery),r}):function(){r.ready(),o.run(e.jQuery)}()}(window); ================================================ FILE: dist/mobile/layer.js ================================================ /*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */ ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'

'+(e?n.title[0]:n.title)+"

":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e=''+n.btn[0]+"",2===t&&(e=''+n.btn[1]+""+e),'
'+e+"
"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='

'+(n.content||"")+"

"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"
':"")+'
"+l+'
'+n.content+"
"+c+"
",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;odiv{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} ================================================ FILE: dist/theme/default/layer.css ================================================ .layui-layer-imgbar,.layui-layer-imgtit a,.layui-layer-tab .layui-layer-title span,.layui-layer-title{text-overflow:ellipsis;white-space:nowrap}html #layuicss-layer{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;border-radius:2px;box-shadow:1px 1px 50px rgba(0,0,0,.3)}.layui-layer-close{position:absolute}.layui-layer-content{position:relative}.layui-layer-border{border:1px solid #B2B2B2;border:1px solid rgba(0,0,0,.1);box-shadow:1px 1px 5px rgba(0,0,0,.2)}.layui-layer-load{background:url(loading-1.gif) center center no-repeat #eee}.layui-layer-ico{background:url(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}.layui-layer-move{display:none;position:fixed;*position:absolute;left:0;top:0;width:100%;height:100%;cursor:move;opacity:0;filter:alpha(opacity=0);background-color:#fff;z-index:2147483647}.layui-layer-resize{position:absolute;width:15px;height:15px;right:0;bottom:0;cursor:se-resize}.layer-anim{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.3s;animation-duration:.3s}@-webkit-keyframes layer-bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layer-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-00{-webkit-animation-name:layer-bounceIn;animation-name:layer-bounceIn}@-webkit-keyframes layer-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 layer-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:layer-zoomInDown;animation-name:layer-zoomInDown}@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-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:layer-fadeInUpBig;animation-name:layer-fadeInUpBig}@-webkit-keyframes layer-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 layer-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:layer-zoomInLeft;animation-name:layer-zoomInLeft}@-webkit-keyframes layer-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 layer-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:layer-rollIn;animation-name:layer-rollIn}@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn}@-webkit-keyframes layer-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 layer-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:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.layui-layer-title{padding:0 80px 0 20px;height:50px;line-height:50px;border-bottom:1px solid #F0F0F0;font-size:14px;color:#333;overflow:hidden;border-radius:2px 2px 0 0}.layui-layer-setwin{position:absolute;right:15px;*right:0;top:17px;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:1px -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 15px 12px;pointer-events:auto;user-select:none;-webkit-user-select:none}.layui-layer-btn a{height:28px;line-height:28px;margin:5px 5px 0;padding:0 15px;border:1px solid #dedede;background-color:#fff;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:.8}.layui-layer-btn .layui-layer-btn0{border-color:#1E9FFF;background-color:#1E9FFF;color:#fff}.layui-layer-btn-l{text-align:left}.layui-layer-btn-c{text-align:center}.layui-layer-dialog{min-width:300px}.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 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(loading-0.gif) no-repeat}.layui-layer-loading .layui-layer-loading1{width:37px;height:37px;background:url(loading-1.gif) no-repeat}.layui-layer-ico16,.layui-layer-loading .layui-layer-loading2{width:32px;height:32px;background:url(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:8px 15px;font-size:12px;_float:left;border-radius:2px;box-shadow:1px 1px 3px rgba(0,0,0,.2);background-color:#000;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:#000}.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:5px;border-bottom-style:solid;border-bottom-color:#000}.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:5px 10px 10px;text-align:right;border-top:1px solid #E9E7E7}.layui-layer-lan .layui-layer-btn a{background:#fff;border-color:#E9E7E7;color:#333}.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;border-color:#009f95}.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1}.layui-layer-iconext{background:url(icon-ext.png) no-repeat}.layui-layer-prompt .layui-layer-input{display:block;width:260px;height:36px;margin:0 auto;line-height:30px;padding-left:10px;border:1px solid #e6e6e6;color:#333}.layui-layer-prompt textarea.layui-layer-input{width:300px;height:100px;line-height:20px;padding:6px 10px}.layui-layer-prompt .layui-layer-content{padding:20px}.layui-layer-prompt .layui-layer-btn{padding-top:0}.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4)}.layui-layer-tab .layui-layer-title{padding-left:0;overflow:visible}.layui-layer-tab .layui-layer-title span{position:relative;float:left;min-width:80px;max-width:300px;padding:0 20px;text-align:center;overflow:hidden;cursor:pointer}.layui-layer-tab .layui-layer-title span.layui-this{height:51px;border-left:1px solid #eee;border-right:1px solid #eee;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.layui-this{display:block}.layui-layer-photos{background:0 0;box-shadow:none}.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-imgnext,.layui-layer-imgprev{position:fixed;top:50%;width:27px;_width:44px;height:44px;margin-top:-22px;outline:0;blr:expression(this.onFocus=this.blur())}.layui-layer-imgprev{left:30px;background-position:-5px -5px;_background-position:-70px -5px}.layui-layer-imgprev:hover{background-position:-33px -5px;_background-position:-120px -5px}.layui-layer-imgnext{right:30px;_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:fixed;left:0;right:0;bottom:0;width:100%;height:40px;line-height:40px;background-color:#000\9;filter:Alpha(opacity=60);background-color:rgba(2,0,0,.35);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}@-webkit-keyframes layer-bounceOut{100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes layer-bounceOut{100%{opacity:0;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}30%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.layer-anim-close{-webkit-animation-name:layer-bounceOut;animation-name:layer-bounceOut;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}@media screen and (max-width:1100px){.layui-layer-iframe{overflow-y:auto;-webkit-overflow-scrolling:touch}} ================================================ FILE: dist/theme/moon/style.css ================================================ html #layui_layer_skinmoonstylecss{display:none;position:absolute;width:1989px}body .layer-ext-moon[type=dialog]{min-width:320px}body .layer-ext-moon-msg[type=dialog]{min-width:200px}body .layer-ext-moon .layui-layer-title{background:#f6f6f6;color:#212a31;font-size:16px;font-weight:700;height:46px;line-height:46px;border-bottom:1px solid #D5D5D5}body .layer-ext-moon .layui-layer-content .layui-layer-ico{height:32px;width:32px;top:18.5px}body .layer-ext-moon .layui-layer-ico0{background:url(default.png) -96px 0 no-repeat}body .layer-ext-moon .layui-layer-ico1{background:url(default.png) -224px 0 no-repeat}body .layer-ext-moon .layui-layer-ico2{background:url(default.png) -192px 0 no-repeat}body .layer-ext-moon .layui-layer-ico3{background:url(default.png) -160px 0 no-repeat}body .layer-ext-moon .layui-layer-ico4{background:url(default.png) -320px 0 no-repeat}body .layer-ext-moon .layui-layer-ico5{background:url(default.png) -288px 0 no-repeat}body .layer-ext-moon .layui-layer-ico6{background:url(default.png) -256px 0}body .layer-ext-moon .layui-layer-ico7{background:url(default.png) -128px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin{top:15px;right:15px}body .layer-ext-moon .layui-layer-setwin a{width:16px;height:16px}body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover{background-color:#56abe4}body .layer-ext-moon .layui-layer-setwin .layui-layer-max{background:url(default.png) -80px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover{background:url(default.png) -64px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin{background:url(default.png) -32px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover{background:url(default.png) -16px 0 no-repeat}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2{background:url(default.png)}body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover{background:url(default.png) -48px 0}body .layer-ext-moon .layui-layer-padding{padding-top:24px}body .layer-ext-moon .layui-layer-btn{text-align:center;padding-top:15px;padding-bottom:15px;background:#f0f4f7;border-top:1px #c7c7c7 solid}body .layer-ext-moon .layui-layer-btn a{font-size:12px;font-weight:400;margin:0 7px;padding:6px 20px;color:#fff;border:1px solid #0064b6;background:no-repeat #0071ce;border-radius:3px;display:inline-block;height:20px;line-height:20px;text-align:center;vertical-align:middle;text-decoration:none;outline:0}body .layer-ext-moon .layui-layer-btn .layui-layer-btn0{background:#0071ce}body .layer-ext-moon .layui-layer-btn .layui-layer-btn1{background:#fff;color:#404a58;border:1px solid #c0c4cd;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn2{background:#f60;color:#fff;border:1px solid #f60;border-radius:3px}body .layer-ext-moon .layui-layer-btn .layui-layer-btn3{background:red;color:#fff;border:1px solid red;border-radius:3px}body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{height:47px} ================================================ FILE: gulpfile.js ================================================ /** layer 构建 */ var pkg = require('./package.json'); var gulp = require('gulp'); var uglify = require('gulp-uglify'); var minify = require('gulp-minify-css'); var rename = require('gulp-rename'); var header = require('gulp-header'); var del = require('del'); var task = { layer: function() { gulp.src('./src/**/*.css') .pipe(minify({ compatibility: 'ie7' })) .pipe(gulp.dest('./dist')); return gulp.src('./src/layer.js').pipe(uglify({ output: { ascii_only: true //escape Unicode characters in strings and regexps } })) .pipe(header('/*! <%= pkg.realname %>-v<%= pkg.version %> <%= pkg.description %> <%= pkg.license %> License */\n ;', {pkg: pkg})) .pipe(gulp.dest('./dist')); } ,mobile: function() { return gulp.src('./src/mobile/layer.js').pipe(uglify({ output: { ascii_only: true //escape Unicode characters in strings and regexps } })) .pipe(header('/*! <%= pkg.realname %> mobile-v<%= pkg.mobile %> <%= pkg.description %> <%= pkg.license %> License */\n ;', {pkg: pkg})) .pipe(gulp.dest('./dist/mobile')); } ,other: function(){ gulp.src('./src/**/*.{png,gif}').pipe(rename({})) .pipe(gulp.dest('./dist')); } }; gulp.task('clear', function(cb){ //清理 return del(['./dist/*'], cb); }); gulp.task('layer', task.minjs); //压缩PC版本 gulp.task('mobile', task.mincss); //压缩Mobile文件 gulp.task('other', task.other); //移动一些配件 //发行版本目录 var releaseDir = './release/zip/layer-v' + pkg.version; var release = releaseDir + '/layer'; //打包发行版 gulp.task('clearZip', function(cb){ //清理 return del([releaseDir], cb); }); gulp.task('r', ['clearZip'], function(){ gulp.src('./release/doc/**/*') .pipe(gulp.dest(releaseDir)); return gulp.src([ './dist/**/*' ,'!./dist/**/moon' ,'!./dist/**/moon/*' ]) .pipe(gulp.dest(release)); }); //全部 gulp.task('default', ['clear'], function(){ for(var key in task){ task[key](); } }); ================================================ FILE: package.json ================================================ { "name": "layer-src", "realname": "layer", "version": "3.5.1", "mobile": "2.0.0", "description": "Web 通用弹出层组件", "main": "src/layer.js", "license": "MIT", "scripts": { "run": "gulp" }, "repository": { "type": "https", "url": "git+https://github.com/sentsin/layer.git" }, "devDependencies": { "gulp": "^3.9.0", "gulp-minify-css": "^1.2.4", "gulp-uglify": "^1.5.4", "gulp-rename": "^1.2.2", "gulp-header": "^1.8.8", "del": "^2.2.2" }, "bugs": { "url": "https://github.com/sentsin/layer/issues" }, "directories": { "test": "test" }, "dependencies": {}, "keywords": [ "layui", "layer", "dialog", "tips", "alert", "confirm", "window" ] } ================================================ FILE: src/README.md ================================================ ## 注意 开发版源码随时可能会提交，因此生产环境更建议 dist 目录中压缩后的 layer.js。 ================================================ FILE: src/layer.js ================================================ /*! * layer - 通用 Web 弹出层组件 * MIT Licensed */ ;!function(window, undefined){ "use strict"; var isLayui = window.layui && layui.define, $, win, ready = { getPath: function(){ var jsPath = document.currentScript ? document.currentScript.src : function(){ var js = document.scripts ,last = js.length - 1 ,src; for(var i = last; i > 0; i--){ if(js[i].readyState === 'interactive'){ src = js[i].src; break; } } return src || js[last].src; }() ,GLOBAL = window.LAYUI_GLOBAL || {}; return GLOBAL.layer_dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1); }(), config: {}, end: {}, minIndex: 0, minLeft: [], btn: ['确定', '取消'], //五种原始层模式 type: ['dialog', 'page', 'iframe', 'loading', 'tips'], //获取节点的style属性值 getStyle: function(node, name){ var style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null); return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name); }, //载入 CSS 依赖 link: function(href, fn, cssname){ //未设置路径，则不主动加载css if(!layer.path) return; var head = document.getElementsByTagName("head")[0] ,link = document.createElement('link'); if(typeof fn === 'string') cssname = fn; var app = (cssname || href).replace(/\.|\//g, ''); var id = 'layuicss-'+ app ,STAUTS_NAME = 'creating' ,timeout = 0; link.rel = 'stylesheet'; link.href = layer.path + href; link.id = id; if(!document.getElementById(id)){ head.appendChild(link); } if(typeof fn !== 'function') return; //轮询 css 是否加载完毕 (function poll(status) { var delay = 100 ,getLinkElem = document.getElementById(id); //获取动态插入的 link 元素 //如果轮询超过指定秒数，则视为请求文件失败或 css 文件不符合规范 if(++timeout > 10 * 1000 / delay){ return window.console && console.error(app +'.css: Invalid'); }; //css 加载就绪 if(parseInt(ready.getStyle(getLinkElem, 'width')) === 1989){ //如果参数来自于初始轮询（即未加载就绪时的），则移除 link 标签状态 if(status === STAUTS_NAME) getLinkElem.removeAttribute('lay-status'); //如果 link 标签的状态仍为「创建中」，则继续进入轮询，直到状态改变，则执行回调 getLinkElem.getAttribute('lay-status') === STAUTS_NAME ? setTimeout(poll, delay) : fn(); } else { getLinkElem.setAttribute('lay-status', STAUTS_NAME); setTimeout(function(){ poll(STAUTS_NAME); }, delay); } //parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 1000); }()); } }; //默认内置方法。 var layer = { v: '3.5.1', ie: function(){ //ie版本 var agent = navigator.userAgent.toLowerCase(); return (!!window.ActiveXObject || "ActiveXObject" in window) ? ( (agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识 ) : false; }(), index: (window.layer && window.layer.v) ? 100000 : 0, path: ready.getPath, config: function(options, fn){ options = options || {}; layer.cache = ready.config = $.extend({}, ready.config, options); layer.path = ready.config.path || layer.path; typeof options.extend === 'string' && (options.extend = [options.extend]); //如果设置了路径，则加载样式 if(ready.config.path) layer.ready(); if(!options.extend) return this; isLayui ? layui.addcss('modules/layer/' + options.extend) : ready.link('theme/' + options.extend); return this; }, //主体CSS等待事件 ready: function(callback){ var cssname = 'layer', ver = '' ,path = (isLayui ? 'modules/layer/' : 'theme/') + 'default/layer.css?v='+ layer.v + ver; isLayui ? layui.addcss(path, callback, cssname) : ready.link(path, callback, cssname); return this; }, //各种快捷引用 alert: function(content, options, yes){ var type = typeof options === 'function'; if(type) yes = options; return layer.open($.extend({ content: content, yes: yes }, type ? {} : options)); }, confirm: function(content, options, yes, cancel){ var type = typeof options === 'function'; if(type){ cancel = yes; yes = options; } return layer.open($.extend({ content: content, btn: ready.btn, yes: yes, btn2: cancel }, type ? {} : options)); }, msg: function(content, options, end){ //最常用提示层 var type = typeof options === 'function', rskin = ready.config.skin; var skin = (rskin ? rskin + ' ' + rskin + '-msg' : '')||'layui-layer-msg'; var anim = doms.anim.length - 1; if(type) end = options; return layer.open($.extend({ content: content, time: 3000, shade: false, skin: skin, title: false, closeBtn: false, btn: false, resize: false, end: end }, (type && !ready.config.skin) ? { skin: skin + ' layui-layer-hui', anim: anim } : function(){ options = options || {}; if(options.icon === -1 || options.icon === undefined && !ready.config.skin){ options.skin = skin + ' ' + (options.skin||'layui-layer-hui'); } return options; }())); }, load: function(icon, options){ return layer.open($.extend({ type: 3, icon: icon || 0, resize: false, shade: 0.01 }, options)); }, tips: function(content, follow, options){ return layer.open($.extend({ type: 4, content: [content, follow], closeBtn: false, time: 3000, shade: false, resize: false, fixed: false, maxWidth: 260 }, options)); } }; var Class = function(setings){ var that = this, creat = function(){ that.creat(); }; that.index = ++layer.index; that.config.maxWidth = $(win).width() - 15*2; //初始最大宽度：当前屏幕宽，左右留 15px 边距 that.config = $.extend({}, that.config, ready.config, setings); document.body ? creat() : setTimeout(function(){ creat(); }, 30); }; Class.pt = Class.prototype; //缓存常用字符 var doms = ['layui-layer', '.layui-layer-title', '.layui-layer-main', '.layui-layer-dialog', 'layui-layer-iframe', 'layui-layer-content', 'layui-layer-btn', 'layui-layer-close']; doms.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06']; doms.SHADE = 'layui-layer-shade'; doms.MOVE = 'layui-layer-move'; //默认配置 Class.pt.config = { type: 0, shade: 0.3, fixed: true, move: doms[1], title: '信息', offset: 'auto', area: 'auto', closeBtn: 1, time: 0, //0表示不自动关闭 zIndex: 19891014, maxWidth: 360, anim: 0, isOutAnim: true, //退出动画 minStack: true, //最小化堆叠 icon: -1, moveType: 1, resize: true, scrollbar: true, //是否允许浏览器滚动条 tips: 2 }; //容器 Class.pt.vessel = function(conType, callback){ var that = this, times = that.index, config = that.config; var zIndex = config.zIndex + times, titype = typeof config.title === 'object'; var ismax = config.maxmin && (config.type === 1 || config.type === 2); var titleHTML = (config.title ? '
' + (titype ? config.title[0] : config.title) + '
' : ''); config.zIndex = zIndex; callback([ //遮罩 config.shade ? ('
') : '', //主体 '
' + (conType && config.type != 2 ? '' : titleHTML) + '
' + (config.type == 0 && config.icon !== -1 ? '' : '') + (config.type == 1 && conType ? '' : (config.content||'')) + '
' + ''+ function(){ var closebtn = ismax ? '' : ''; config.closeBtn && (closebtn += ''); return closebtn; }() + '' + (config.btn ? function(){ var button = ''; typeof config.btn === 'string' && (config.btn = [config.btn]); for(var i = 0, len = config.btn.length; i < len; i++){ button += ''+ config.btn[i] +'' } return '
'+ button +'
' }() : '') + (config.resize ? '' : '') + '
' ], titleHTML, $('
')); return that; }; //创建骨架 Class.pt.creat = function(){ var that = this ,config = that.config ,times = that.index, nodeIndex ,content = config.content ,conType = typeof content === 'object' ,body = $('body'); if(config.id && $('#'+config.id)[0]) return; if(typeof config.area === 'string'){ config.area = config.area === 'auto' ? ['', ''] : [config.area, '']; } //anim兼容旧版shift if(config.shift){ config.anim = config.shift; } if(layer.ie == 6){ config.fixed = false; } switch(config.type){ case 0: config.btn = ('btn' in config) ? config.btn : ready.btn[0]; layer.closeAll('dialog'); break; case 2: var content = config.content = conType ? config.content : [config.content||'', 'auto']; config.content = ''; break; case 3: delete config.title; delete config.closeBtn; config.icon === -1 && (config.icon === 0); layer.closeAll('loading'); break; case 4: conType || (config.content = [config.content, 'body']); config.follow = config.content[1]; config.content = config.content[0] + ''; delete config.title; config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true]; config.tipsMore || layer.closeAll('tips'); break; } //建立容器 that.vessel(conType, function(html, titleHTML, moveElem){ body.append(html[0]); conType ? function(){ (config.type == 2 || config.type == 4) ? function(){ $('body').append(html[1]); }() : function(){ if(!content.parents('.'+doms[0])[0]){ content.data('display', content.css('display')).show().addClass('layui-layer-wrap').wrap(html[1]); $('#'+ doms[0] + times).find('.'+doms[5]).before(titleHTML); } }(); }() : body.append(html[1]); $('#'+ doms.MOVE)[0] || body.append(ready.moveElem = moveElem); that.layero = $('#'+ doms[0] + times); that.shadeo = $('#'+ doms.SHADE + times); config.scrollbar || doms.html.css('overflow', 'hidden').attr('layer-full', times); }).auto(times); //遮罩 that.shadeo.css({ 'background-color': config.shade[1] || '#000' ,'opacity': config.shade[0] || config.shade }); config.type == 2 && layer.ie == 6 && that.layero.find('iframe').attr('src', content[0]); //坐标自适应浏览器窗口尺寸 config.type == 4 ? that.tips() : function(){ that.offset() //首次弹出时，若 css 尚未加载，则等待 css 加载完毕后，重新设定尺寸 parseInt(ready.getStyle(document.getElementById(doms.MOVE), 'z-index')) || function(){ that.layero.css('visibility', 'hidden'); layer.ready(function(){ that.offset(); that.layero.css('visibility', 'visible'); }); }(); }(); //如果是固定定位 if(config.fixed){ win.on('resize', function(){ that.offset(); (/^\d+%$/.test(config.area[0]) || /^\d+%$/.test(config.area[1])) && that.auto(times); config.type == 4 && that.tips(); }); } config.time <= 0 || setTimeout(function(){ layer.close(that.index); }, config.time); that.move().callback(); //为兼容jQuery3.0的css动画影响元素尺寸计算 if(doms.anim[config.anim]){ var animClass = 'layer-anim '+ doms.anim[config.anim]; that.layero.addClass(animClass).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(animClass); }); }; //记录关闭动画 if(config.isOutAnim){ that.layero.data('isOutAnim', true); } }; //自适应 Class.pt.auto = function(index){ var that = this, config = that.config, layero = $('#'+ doms[0] + index); if(config.area[0] === '' && config.maxWidth > 0){ //为了修复IE7下一个让人难以理解的bug if(layer.ie && layer.ie < 8 && config.btn){ layero.width(layero.innerWidth()); } layero.outerWidth() > config.maxWidth && layero.width(config.maxWidth); } var area = [layero.innerWidth(), layero.innerHeight()] ,titHeight = layero.find(doms[1]).outerHeight() || 0 ,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0 ,setHeight = function(elem){ elem = layero.find(elem); elem.height(area[1] - titHeight - btnHeight - 2*(parseFloat(elem.css('padding-top'))|0)); }; switch(config.type){ case 2: setHeight('iframe'); break; default: if(config.area[1] === ''){ if(config.maxHeight > 0 && layero.outerHeight() > config.maxHeight){ area[1] = config.maxHeight; setHeight('.'+doms[5]); } else if(config.fixed && area[1] >= win.height()){ area[1] = win.height(); setHeight('.'+doms[5]); } } else { setHeight('.'+doms[5]); } break; }; return that; }; //计算坐标 Class.pt.offset = function(){ var that = this, config = that.config, layero = that.layero; var area = [layero.outerWidth(), layero.outerHeight()]; var type = typeof config.offset === 'object'; that.offsetTop = (win.height() - area[1])/2; that.offsetLeft = (win.width() - area[0])/2; if(type){ that.offsetTop = config.offset[0]; that.offsetLeft = config.offset[1]||that.offsetLeft; } else if(config.offset !== 'auto'){ if(config.offset === 't'){ //上 that.offsetTop = 0; } else if(config.offset === 'r'){ //右 that.offsetLeft = win.width() - area[0]; } else if(config.offset === 'b'){ //下 that.offsetTop = win.height() - area[1]; } else if(config.offset === 'l'){ //左 that.offsetLeft = 0; } else if(config.offset === 'lt'){ //左上角 that.offsetTop = 0; that.offsetLeft = 0; } else if(config.offset === 'lb'){ //左下角 that.offsetTop = win.height() - area[1]; that.offsetLeft = 0; } else if(config.offset === 'rt'){ //右上角 that.offsetTop = 0; that.offsetLeft = win.width() - area[0]; } else if(config.offset === 'rb'){ //右下角 that.offsetTop = win.height() - area[1]; that.offsetLeft = win.width() - area[0]; } else { that.offsetTop = config.offset; } } if(!config.fixed){ that.offsetTop = /%$/.test(that.offsetTop) ? win.height()*parseFloat(that.offsetTop)/100 : parseFloat(that.offsetTop); that.offsetLeft = /%$/.test(that.offsetLeft) ? win.width()*parseFloat(that.offsetLeft)/100 : parseFloat(that.offsetLeft); that.offsetTop += win.scrollTop(); that.offsetLeft += win.scrollLeft(); } if(layero.attr('minLeft')){ that.offsetTop = win.height() - (layero.find(doms[1]).outerHeight() || 0); that.offsetLeft = layero.css('left'); } layero.css({top: that.offsetTop, left: that.offsetLeft}); }; //Tips Class.pt.tips = function(){ var that = this, config = that.config, layero = that.layero; var layArea = [layero.outerWidth(), layero.outerHeight()], follow = $(config.follow); if(!follow[0]) follow = $('body'); var goal = { width: follow.outerWidth(), height: follow.outerHeight(), top: follow.offset().top, left: follow.offset().left }, tipsG = layero.find('.layui-layer-TipsG'); var guide = config.tips[0]; config.tips[1] || tipsG.remove(); goal.autoLeft = function(){ if(goal.left + layArea[0] - win.width() > 0){ goal.tipLeft = goal.left + goal.width - layArea[0]; tipsG.css({right: 12, left: 'auto'}); } else { goal.tipLeft = goal.left; }; }; //辨别tips的方位 goal.where = [function(){ //上 goal.autoLeft(); goal.tipTop = goal.top - layArea[1] - 10; tipsG.removeClass('layui-layer-TipsB').addClass('layui-layer-TipsT').css('border-right-color', config.tips[1]); }, function(){ //右 goal.tipLeft = goal.left + goal.width + 10; goal.tipTop = goal.top; tipsG.removeClass('layui-layer-TipsL').addClass('layui-layer-TipsR').css('border-bottom-color', config.tips[1]); }, function(){ //下 goal.autoLeft(); goal.tipTop = goal.top + goal.height + 10; tipsG.removeClass('layui-layer-TipsT').addClass('layui-layer-TipsB').css('border-right-color', config.tips[1]); }, function(){ //左 goal.tipLeft = goal.left - layArea[0] - 10; goal.tipTop = goal.top; tipsG.removeClass('layui-layer-TipsR').addClass('layui-layer-TipsL').css('border-bottom-color', config.tips[1]); }]; goal.where[guide-1](); /* 8*2为小三角形占据的空间 */ if(guide === 1){ goal.top - (win.scrollTop() + layArea[1] + 8*2) < 0 && goal.where[2](); } else if(guide === 2){ win.width() - (goal.left + goal.width + layArea[0] + 8*2) > 0 || goal.where[3]() } else if(guide === 3){ (goal.top - win.scrollTop() + goal.height + layArea[1] + 8*2) - win.height() > 0 && goal.where[0](); } else if(guide === 4){ layArea[0] + 8*2 - goal.left > 0 && goal.where[1]() } layero.find('.'+doms[5]).css({ 'background-color': config.tips[1], 'padding-right': (config.closeBtn ? '30px' : '') }); layero.css({ left: goal.tipLeft - (config.fixed ? win.scrollLeft() : 0), top: goal.tipTop - (config.fixed ? win.scrollTop() : 0) }); } //拖拽层 Class.pt.move = function(){ var that = this ,config = that.config ,_DOC = $(document) ,layero = that.layero ,moveElem = layero.find(config.move) ,resizeElem = layero.find('.layui-layer-resize') ,dict = {}; if(config.move){ moveElem.css('cursor', 'move'); } moveElem.on('mousedown', function(e){ e.preventDefault(); if(config.move){ dict.moveStart = true; dict.offset = [ e.clientX - parseFloat(layero.css('left')) ,e.clientY - parseFloat(layero.css('top')) ]; ready.moveElem.css('cursor', 'move').show(); } }); resizeElem.on('mousedown', function(e){ e.preventDefault(); dict.resizeStart = true; dict.offset = [e.clientX, e.clientY]; dict.area = [ layero.outerWidth() ,layero.outerHeight() ]; ready.moveElem.css('cursor', 'se-resize').show(); }); _DOC.on('mousemove', function(e){ //拖拽移动 if(dict.moveStart){ var X = e.clientX - dict.offset[0] ,Y = e.clientY - dict.offset[1] ,fixed = layero.css('position') === 'fixed'; e.preventDefault(); dict.stX = fixed ? 0 : win.scrollLeft(); dict.stY = fixed ? 0 : win.scrollTop(); //控制元素不被拖出窗口外 if(!config.moveOut){ var setRig = win.width() - layero.outerWidth() + dict.stX ,setBot = win.height() - layero.outerHeight() + dict.stY; X < dict.stX && (X = dict.stX); X > setRig && (X = setRig); Y < dict.stY && (Y = dict.stY); Y > setBot && (Y = setBot); } layero.css({ left: X ,top: Y }); } //Resize if(config.resize && dict.resizeStart){ var X = e.clientX - dict.offset[0] ,Y = e.clientY - dict.offset[1]; e.preventDefault(); layer.style(that.index, { width: dict.area[0] + X ,height: dict.area[1] + Y }) dict.isResize = true; config.resizing && config.resizing(layero); } }).on('mouseup', function(e){ if(dict.moveStart){ delete dict.moveStart; ready.moveElem.hide(); config.moveEnd && config.moveEnd(layero); } if(dict.resizeStart){ delete dict.resizeStart; ready.moveElem.hide(); } }); return that; }; Class.pt.callback = function(){ var that = this, layero = that.layero, config = that.config; that.openLayer(); if(config.success){ if(config.type == 2){ layero.find('iframe').on('load', function(){ config.success(layero, that.index); }); } else { config.success(layero, that.index); } } layer.ie == 6 && that.IE6(layero); //按钮 layero.find('.'+ doms[6]).children('a').on('click', function(){ var index = $(this).index(); if(index === 0){ if(config.yes){ config.yes(that.index, layero) } else if(config['btn1']){ config['btn1'](that.index, layero) } else { layer.close(that.index); } } else { var close = config['btn'+(index+1)] && config['btn'+(index+1)](that.index, layero); close === false || layer.close(that.index); } }); //取消 function cancel(){ var close = config.cancel && config.cancel(that.index, layero); close === false || layer.close(that.index); } //右上角关闭回调 layero.find('.'+ doms[7]).on('click', cancel); //点遮罩关闭 if(config.shadeClose){ that.shadeo.on('click', function(){ layer.close(that.index); }); } //最小化 layero.find('.layui-layer-min').on('click', function(){ var min = config.min && config.min(layero, that.index); min === false || layer.min(that.index, config); }); //全屏/还原 layero.find('.layui-layer-max').on('click', function(){ if($(this).hasClass('layui-layer-maxmin')){ layer.restore(that.index); config.restore && config.restore(layero, that.index); } else { layer.full(that.index, config); setTimeout(function(){ config.full && config.full(layero, that.index); }, 100); } }); config.end && (ready.end[that.index] = config.end); }; //for ie6 恢复select ready.reselect = function(){ $.each($('select'), function(index , value){ var sthis = $(this); if(!sthis.parents('.'+doms[0])[0]){ (sthis.attr('layer') == 1 && $('.'+doms[0]).length < 1) && sthis.removeAttr('layer').show(); } sthis = null; }); }; Class.pt.IE6 = function(layero){ //隐藏select $('select').each(function(index , value){ var sthis = $(this); if(!sthis.parents('.'+doms[0])[0]){ sthis.css('display') === 'none' || sthis.attr({'layer' : '1'}).hide(); } sthis = null; }); }; //需依赖原型的对外方法 Class.pt.openLayer = function(){ var that = this; //置顶当前窗口 layer.zIndex = that.config.zIndex; layer.setTop = function(layero){ var setZindex = function(){ layer.zIndex++; layero.css('z-index', layer.zIndex + 1); }; layer.zIndex = parseInt(layero[0].style.zIndex); layero.on('mousedown', setZindex); return layer.zIndex; }; }; //记录宽高坐标，用于还原 ready.record = function(layero){ var area = [ layero.width(), layero.height(), layero.position().top, layero.position().left + parseFloat(layero.css('margin-left')) ]; layero.find('.layui-layer-max').addClass('layui-layer-maxmin'); layero.attr({area: area}); }; ready.rescollbar = function(index){ if(doms.html.attr('layer-full') == index){ if(doms.html[0].style.removeProperty){ doms.html[0].style.removeProperty('overflow'); } else { doms.html[0].style.removeAttribute('overflow'); } doms.html.removeAttr('layer-full'); } }; /** 内置成员 */ window.layer = layer; //获取子iframe的DOM layer.getChildFrame = function(selector, index){ index = index || $('.'+doms[4]).attr('times'); return $('#'+ doms[0] + index).find('iframe').contents().find(selector); }; //得到当前iframe层的索引，子iframe时使用 layer.getFrameIndex = function(name){ return $('#'+ name).parents('.'+doms[4]).attr('times'); }; //iframe层自适应宽高 layer.iframeAuto = function(index){ if(!index) return; var heg = layer.getChildFrame('html', index).outerHeight(); var layero = $('#'+ doms[0] + index); var titHeight = layero.find(doms[1]).outerHeight() || 0; var btnHeight = layero.find('.'+doms[6]).outerHeight() || 0; layero.css({height: heg + titHeight + btnHeight}); layero.find('iframe').css({height: heg}); }; //重置iframe url layer.iframeSrc = function(index, url){ $('#'+ doms[0] + index).find('iframe').attr('src', url); }; //设定层的样式 layer.style = function(index, options, limit){ var layero = $('#'+ doms[0] + index) ,contElem = layero.find('.layui-layer-content') ,type = layero.attr('type') ,titHeight = layero.find(doms[1]).outerHeight() || 0 ,btnHeight = layero.find('.'+doms[6]).outerHeight() || 0 ,minLeft = layero.attr('minLeft'); if(type === ready.type[3] || type === ready.type[4]){ return; } if(!limit){ if(parseFloat(options.width) <= 260){ options.width = 260; }; if(parseFloat(options.height) - titHeight - btnHeight <= 64){ options.height = 64 + titHeight + btnHeight; }; } layero.css(options); btnHeight = layero.find('.'+doms[6]).outerHeight(); if(type === ready.type[2]){ layero.find('iframe').css({ height: parseFloat(options.height) - titHeight - btnHeight }); } else { contElem.css({ height: parseFloat(options.height) - titHeight - btnHeight - parseFloat(contElem.css('padding-top')) - parseFloat(contElem.css('padding-bottom')) }) } }; //最小化 layer.min = function(index, options){ options = options || {}; var layero = $('#'+ doms[0] + index) ,shadeo = $('#'+ doms.SHADE + index) ,titHeight = layero.find(doms[1]).outerHeight() || 0 ,left = layero.attr('minLeft') || (181*ready.minIndex)+'px' ,position = layero.css('position') ,settings = { width: 180 ,height: titHeight ,position: 'fixed' ,overflow: 'hidden' }; //记录宽高坐标，用于还原 ready.record(layero); if(ready.minLeft[0]){ left = ready.minLeft[0]; ready.minLeft.shift(); } //是否堆叠在左下角 if(options.minStack){ settings.left = left; settings.top = win.height() - titHeight; layero.attr('minLeft') || ready.minIndex++; //初次执行，最小化操作索引自增 layero.attr('minLeft', left); } layero.attr('position', position); layer.style(index, settings, true); layero.find('.layui-layer-min').hide(); layero.attr('type') === 'page' && layero.find(doms[4]).hide(); ready.rescollbar(index); //隐藏遮罩 shadeo.hide(); }; //还原 layer.restore = function(index){ var layero = $('#'+ doms[0] + index) ,shadeo = $('#'+ doms.SHADE + index) ,area = layero.attr('area').split(',') ,type = layero.attr('type'); //恢复原来尺寸 layer.style(index, { width: parseFloat(area[0]), height: parseFloat(area[1]), top: parseFloat(area[2]), left: parseFloat(area[3]), position: layero.attr('position'), overflow: 'visible' }, true); layero.find('.layui-layer-max').removeClass('layui-layer-maxmin'); layero.find('.layui-layer-min').show(); layero.attr('type') === 'page' && layero.find(doms[4]).show(); ready.rescollbar(index); //恢复遮罩 shadeo.show(); }; //全屏 layer.full = function(index){ var layero = $('#'+ doms[0] + index), timer; ready.record(layero); if(!doms.html.attr('layer-full')){ doms.html.css('overflow','hidden').attr('layer-full', index); } clearTimeout(timer); timer = setTimeout(function(){ var isfix = layero.css('position') === 'fixed'; layer.style(index, { top: isfix ? 0 : win.scrollTop(), left: isfix ? 0 : win.scrollLeft(), width: win.width(), height: win.height() }, true); layero.find('.layui-layer-min').hide(); }, 100); }; //改变title layer.title = function(name, index){ var title = $('#'+ doms[0] + (index||layer.index)).find(doms[1]); title.html(name); }; //关闭layer总方法 layer.close = function(index, callback){ var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close'; if(!layero[0]) return; var WRAP = 'layui-layer-wrap', remove = function(){ if(type === ready.type[1] && layero.attr('conType') === 'object'){ layero.children(':not(.'+ doms[5] +')').remove(); var wrap = layero.find('.'+WRAP); for(var i = 0; i < 2; i++){ wrap.unwrap(); } wrap.css('display', wrap.data('display')).removeClass(WRAP); } else { //低版本IE 回收 iframe if(type === ready.type[2]){ try { var iframe = $('#'+doms[4]+index)[0]; iframe.contentWindow.document.write(''); iframe.contentWindow.close(); layero.find('.'+doms[5])[0].removeChild(iframe); } catch(e){} } layero[0].innerHTML = ''; layero.remove(); } typeof ready.end[index] === 'function' && ready.end[index](); delete ready.end[index]; typeof callback === 'function' && callback(); }; if(layero.data('isOutAnim')){ layero.addClass('layer-anim '+ closeAnim); } $('#layui-layer-moves, #'+ doms.SHADE + index).remove(); layer.ie == 6 && ready.reselect(); ready.rescollbar(index); if(layero.attr('minLeft')){ ready.minIndex--; ready.minLeft.push(layero.attr('minLeft')); } if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){ remove() } else { setTimeout(function(){ remove(); }, 200); } }; //关闭所有层 layer.closeAll = function(type, callback){ if(typeof type === 'function'){ callback = type; type = null; }; var domsElem = $('.'+doms[0]); $.each(domsElem, function(_index){ var othis = $(this); var is = type ? (othis.attr('type') === type) : 1; is && layer.close(othis.attr('times'), _index === domsElem.length - 1 ? callback : null); is = null; }); if(domsElem.length === 0) typeof callback === 'function' && callback(); }; /** 拓展模块，layui 开始合并在一起 */ var cache = layer.cache||{}, skin = function(type){ return (cache.skin ? (' ' + cache.skin + ' ' + cache.skin + '-'+type) : ''); }; //仿系统prompt layer.prompt = function(options, yes){ var style = ''; options = options || {}; if(typeof options === 'function') yes = options; if(options.area){ var area = options.area; style = 'style="width: '+ area[0] +'; height: '+ area[1] + ';"'; delete options.area; } var prompt, content = options.formType == 2 ? '' : function(){ return ''; }(); var success = options.success; delete options.success; return layer.open($.extend({ type: 1 ,btn: ['确定','取消'] ,content: content ,skin: 'layui-layer-prompt' + skin('prompt') ,maxWidth: win.width() ,success: function(layero){ prompt = layero.find('.layui-layer-input'); prompt.val(options.value || '').focus(); typeof success === 'function' && success(layero); } ,resize: false ,yes: function(index){ var value = prompt.val(); if(value === ''){ prompt.focus(); } else if(value.length > (options.maxlength||500)) { layer.tips('最多输入'+ (options.maxlength || 500) +'个字数', prompt, {tips: 1}); } else { yes && yes(value, index, prompt); } } }, options)); }; //tab层 layer.tab = function(options){ options = options || {}; var tab = options.tab || {} ,THIS = 'layui-this' ,success = options.success; delete options.success; return layer.open($.extend({ type: 1, skin: 'layui-layer-tab' + skin('tab'), resize: false, title: function(){ var len = tab.length, ii = 1, str = ''; if(len > 0){ str = ''+ tab[0].title +''; for(; ii < len; ii++){ str += ''+ tab[ii].title +''; } } return str; }(), content: '
    '+ function(){ var len = tab.length, ii = 1, str = ''; if(len > 0){ str = '
  • '+ (tab[0].content || 'no content') +'
    • '; for(; ii < len; ii++){ str += '
  • '+ (tab[ii].content || 'no content') +'
    • '; } } return str; }() +'
', success: function(layero){ var btn = layero.find('.layui-layer-title').children(); var main = layero.find('.layui-layer-tabmain').children(); btn.on('mousedown', function(e){ e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; var othis = $(this), index = othis.index(); othis.addClass(THIS).siblings().removeClass(THIS); main.eq(index).show().siblings().hide(); typeof options.change === 'function' && options.change(index); }); typeof success === 'function' && success(layero); } }, options)); }; //相册层 layer.photos = function(options, loop, key){ var dict = {}; options = options || {}; if(!options.photos) return; //若 photos 并非选择器或 jQuery 对象，则为普通 object var isObject = !(typeof options.photos === 'string' || options.photos instanceof $) ,photos = isObject ? options.photos : {} ,data = photos.data || [] ,start = photos.start || 0; dict.imgIndex = (start|0) + 1; options.img = options.img || 'img'; var success = options.success; delete options.success; //如果 options.photos 不是一个对象 if(!isObject){ //页面直接获取 var parent = $(options.photos), pushData = function(){ data = []; parent.find(options.img).each(function(index){ var othis = $(this); othis.attr('layer-index', index); data.push({ alt: othis.attr('alt'), pid: othis.attr('layer-pid'), src: othis.attr('layer-src') || othis.attr('src'), thumb: othis.attr('src') }); }); }; pushData(); if (data.length === 0) return; loop || parent.on('click', options.img, function(){ pushData(); var othis = $(this), index = othis.attr('layer-index'); layer.photos($.extend(options, { photos: { start: index, data: data, tab: options.tab }, full: options.full }), true); }); //不直接弹出 if(!loop) return; } else if (data.length === 0){ return layer.msg('没有图片'); } //上一张 dict.imgprev = function(key){ dict.imgIndex--; if(dict.imgIndex < 1){ dict.imgIndex = data.length; } dict.tabimg(key); }; //下一张 dict.imgnext = function(key,errorMsg){ dict.imgIndex++; if(dict.imgIndex > data.length){ dict.imgIndex = 1; if (errorMsg) {return}; } dict.tabimg(key) }; //方向键 dict.keyup = function(event){ if(!dict.end){ var code = event.keyCode; event.preventDefault(); if(code === 37){ dict.imgprev(true); } else if(code === 39) { dict.imgnext(true); } else if(code === 27) { layer.close(dict.index); } } } //切换 dict.tabimg = function(key){ if(data.length <= 1) return; photos.start = dict.imgIndex - 1; layer.close(dict.index); return layer.photos(options, true, key); setTimeout(function(){ layer.photos(options, true, key); }, 200); } //一些动作 dict.event = function(){ /* dict.bigimg.hover(function(){ dict.imgsee.show(); }, function(){ dict.imgsee.hide(); }); */ dict.bigimg.find('.layui-layer-imgprev').on('click', function(event){ event.preventDefault(); dict.imgprev(true); }); dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){ event.preventDefault(); dict.imgnext(true); }); $(document).on('keyup', dict.keyup); }; //图片预加载 function loadImage(url, callback, error) { var img = new Image(); img.src = url; if(img.complete){ return callback(img); } img.onload = function(){ img.onload = null; callback(img); }; img.onerror = function(e){ img.onerror = null; error(e); }; }; dict.loadi = layer.load(1, { shade: 'shade' in options ? false : 0.9, scrollbar: false }); loadImage(data[start].src, function(img){ layer.close(dict.loadi); //切换图片时不出现动画 if(key) options.anim = -1; //弹出图片层 dict.index = layer.open($.extend({ type: 1, id: 'layui-layer-photos', area: function(){ var imgarea = [img.width, img.height]; var winarea = [$(window).width() - 100, $(window).height() - 100]; //如果 实际图片的宽或者高比 屏幕大（那么进行缩放） if(!options.full && (imgarea[0]>winarea[0]||imgarea[1]>winarea[1])){ var wh = [imgarea[0]/winarea[0],imgarea[1]/winarea[1]];//取宽度缩放比例、高度缩放比例 if(wh[0] > wh[1]){//取缩放比例最大的进行缩放 imgarea[0] = imgarea[0]/wh[0]; imgarea[1] = imgarea[1]/wh[0]; } else if(wh[0] < wh[1]){ imgarea[0] = imgarea[0]/wh[1]; imgarea[1] = imgarea[1]/wh[1]; } } return [imgarea[0]+'px', imgarea[1]+'px']; }(), title: false, shade: 0.9, shadeClose: true, closeBtn: false, move: '.layui-layer-phimg img', moveType: 1, scrollbar: false, moveOut: true, anim: 5, isOutAnim: false, skin: 'layui-layer-photos' + skin('photos'), content: '
' +''+ (data[start].alt||'') +'' +function(){ if(data.length > 1){ return '
' +'' +'
'+ (data[start].alt || '') +''+ dict.imgIndex +' / '+ data.length +'
' +'
' } return ''; }() +'
', success: function(layero, index){ dict.bigimg = layero.find('.layui-layer-phimg'); dict.imgsee = layero.find('.layui-layer-imgbar'); dict.event(layero); options.tab && options.tab(data[start], layero); typeof success === 'function' && success(layero); }, end: function(){ dict.end = true; $(document).off('keyup', dict.keyup); } }, options)); }, function(){ layer.close(dict.loadi); layer.msg('当前图片地址异常
是否继续查看下一张？', { time: 30000, btn: ['下一张', '不看了'], yes: function(){ data.length > 1 && dict.imgnext(true,true); } }); }); }; //主入口 ready.run = function(_$){ $ = _$; win = $(window); doms.html = $('html'); layer.open = function(deliver){ var o = new Class(deliver); return o.index; }; }; //加载方式 window.layui && layui.define ? ( layer.ready() ,layui.define('jquery', function(exports){ //layui 加载 layer.path = layui.cache.dir; ready.run(layui.$); //暴露模块 window.layer = layer; exports('layer', layer); }) ) : ( (typeof define === 'function' && define.amd) ? define(['jquery'], function(){ //requirejs 加载 ready.run(window.jQuery); return layer; }) : function(){ //普通 script 标签加载 layer.ready(); ready.run(window.jQuery); }() ); }(window); ================================================ FILE: src/mobile/README.md ================================================  ## layer mobile layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层支撑，采用Native JavaScript编写，完全独立于PC版的layer，您需要按照场景选择使用。 [文档与演示](http://sentsin.com/layui/layer/) 1. 无需依赖任何库，只加载layer.m.js即可 2. 小巧玲珑，性能卓越、柔情似水… 3. 具备无以伦比的自适应功能 4. 灵活的皮肤自定义支撑，充分确保弹层风格多样化 5. 丰富、科学的接口，让弹弹弹层无所不能 ## 备注 [官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html) ================================================ FILE: src/mobile/layer.js ================================================ /*! @Name：layer mobile v2.0 弹层组件移动版 @Author：贤心 @License：MIT */ ;!function(win){ "use strict"; var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){ return doc[query](s); }; //默认配置 var config = { type: 0 ,shade: true ,shadeClose: true ,fixed: true ,anim: 'scale' //默认动画类型 }; var ready = { extend: function(obj){ var newobj = JSON.parse(JSON.stringify(config)); for(var i in obj){ newobj[i] = obj[i]; } return newobj; }, timer: {}, end: {} }; //点触事件 ready.touch = function(elem, fn){ elem.addEventListener('click', function(e){ fn.call(this, e); }, false); }; var index = 0, classs = ['layui-m-layer'], Layer = function(options){ var that = this; that.config = ready.extend(options); that.view(); }; Layer.prototype.view = function(){ var that = this, config = that.config, layerbox = doc.createElement('div'); that.id = layerbox.id = classs[0] + index; layerbox.setAttribute('class', classs[0] + ' ' + classs[0]+(config.type || 0)); layerbox.setAttribute('index', index); //标题区域 var title = (function(){ var titype = typeof config.title === 'object'; return config.title ? '

'+ (titype ? config.title[0] : config.title) +'

' : ''; }()); //按钮区域 var button = (function(){ typeof config.btn === 'string' && (config.btn = [config.btn]); var btns = (config.btn || []).length, btndom; if(btns === 0 || !config.btn){ return ''; } btndom = ''+ config.btn[0] +'' if(btns === 2){ btndom = ''+ config.btn[1] +'' + btndom; } return '
'+ btndom + '
'; }()); if(!config.fixed){ config.top = config.hasOwnProperty('top') ? config.top : 100; config.style = config.style || ''; config.style += ' top:'+ ( doc.body.scrollTop + config.top) + 'px'; } if(config.type === 2){ config.content = '

'+ (config.content||'') +'

'; } if(config.skin) config.anim = 'up'; if(config.skin === 'msg') config.shade = false; layerbox.innerHTML = (config.shade ? '
' : '') +'
' +'
' +'
' + title +'
'+ config.content +'
' + button +'
' +'
' +'
'; if(!config.type || config.type === 2){ var dialogs = doc[claname](classs[0] + config.type), dialen = dialogs.length; if(dialen >= 1){ layer.close(dialogs[0].getAttribute('index')) } } document.body.appendChild(layerbox); var elem = that.elem = S('#'+that.id)[0]; config.success && config.success(elem); that.index = index++; that.action(config, elem); }; Layer.prototype.action = function(config, elem){ var that = this; //自动关闭 if(config.time){ ready.timer[that.index] = setTimeout(function(){ layer.close(that.index); }, config.time*1000); } //确认取消 var btn = function(){ var type = this.getAttribute('type'); if(type == 0){ config.no && config.no(); layer.close(that.index); } else { config.yes ? config.yes(that.index) : layer.close(that.index); } }; if(config.btn){ var btns = elem[claname]('layui-m-layerbtn')[0].children, btnlen = btns.length; for(var ii = 0; ii < btnlen; ii++){ ready.touch(btns[ii], btn); } } //点遮罩关闭 if(config.shade && config.shadeClose){ var shade = elem[claname]('layui-m-layershade')[0]; ready.touch(shade, function(){ layer.close(that.index, config.end); }); } config.end && (ready.end[that.index] = config.end); }; win.layer = { v: '2.0', index: index, //核心方法 open: function(options){ var o = new Layer(options || {}); return o.index; }, close: function(index){ var ibox = S('#'+classs[0]+index)[0]; if(!ibox) return; ibox.innerHTML = ''; doc.body.removeChild(ibox); clearTimeout(ready.timer[index]); delete ready.timer[index]; typeof ready.end[index] === 'function' && ready.end[index](); delete ready.end[index]; }, //关闭所有layer层 closeAll: function(){ var boxs = doc[claname](classs[0]); for(var i = 0, len = boxs.length; i < len; i++){ layer.close((boxs[0].getAttribute('index')|0)); } } }; 'function' == typeof define ? define(function() { return layer; }) : function(){ var js = document.scripts, script = js[js.length - 1], jsPath = script.src; var path = jsPath.substring(0, jsPath.lastIndexOf("/") + 1); //如果合并方式，则需要单独引入layer.css if(script.getAttribute('merge')) return; document.head.appendChild(function(){ var link = doc.createElement('link'); link.href = path + 'need/layer.css?2.0'; link.type = 'text/css'; link.rel = 'styleSheet' link.id = 'layermcss'; return link; }()); }(); }(window); ================================================ FILE: src/mobile/need/layer.css ================================================  /* layer mobile */ .layui-m-layer{position:relative; z-index: 19891014;} .layui-m-layer *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;} .layui-m-layershade, .layui-m-layermain{position:fixed; left:0; top:0; width:100%; height:100%;} .layui-m-layershade{background-color:rgba(0,0,0, .7); pointer-events:auto;} .layui-m-layermain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} .layui-m-layermain .layui-m-layersection{display:table-cell; vertical-align:middle; text-align:center;} .layui-m-layerchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius: 5px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;} .layui-m-layerchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s;} /* 弹出动画 */ @-webkit-keyframes layui-m-anim-scale { /* 默认 */ 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} } @keyframes layui-m-anim-scale { /* 默认 */ 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} } .layui-m-anim-scale{animation-name: layui-m-anim-scale; -webkit-animation-name: layui-m-anim-scale;} @-webkit-keyframes layui-m-anim-up{ 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)} 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)} } @keyframes layui-m-anim-up{ 0%{opacity: 0; -webkit-transform: translateY(800px); transform: translateY(800px)} 100%{opacity: 1; -webkit-transform: translateY(0); transform: translateY(0)} } .layui-m-anim-up{-webkit-animation-name: layui-m-anim-up;animation-name: layui-m-anim-up} .layui-m-layer0 .layui-m-layerchild{width: 90%; max-width: 640px;} .layui-m-layer1 .layui-m-layerchild{border:none; border-radius:0;} .layui-m-layer2 .layui-m-layerchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} .layui-m-layerchild h3{padding: 0 10px; height: 60px; line-height: 60px; font-size:16px; font-weight: 400; border-radius: 5px 5px 0 0; text-align: center;} .layui-m-layerchild h3, .layui-m-layerbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .layui-m-layercont{padding: 50px 30px; line-height: 22px; text-align:center;} .layui-m-layer1 .layui-m-layercont{padding:0; text-align:left;} .layui-m-layer2 .layui-m-layercont{text-align:center; padding: 0; line-height: 0;} .layui-m-layer2 .layui-m-layercont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} .layui-m-layer2 .layui-m-layercont p{margin-top: 20px;} /* loading */ @-webkit-keyframes layui-m-anim-loading{ 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} 40%{transform:scale(1); -webkit-transform:scale(1)} } @keyframes layui-m-anim-loading{ 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} 40%{transform:scale(1); -webkit-transform:scale(1)} } .layui-m-layer2 .layui-m-layercont i{-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out; animation: layui-m-anim-loading 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} .layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay: -.16s; animation-delay: -.16s;} .layui-m-layer2 .layui-m-layercont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} .layui-m-layerbtn{display: box; display: -moz-box; display: -webkit-box; width: 100%; position:relative; height: 50px; line-height: 50px; font-size: 0; text-align:center; border-top:1px solid #D0D0D0; background-color: #F2F2F2; border-radius: 0 0 5px 5px;} .layui-m-layerbtn span{position:relative; display: block; -moz-box-flex: 1; box-flex: 1; -webkit-box-flex: 1; text-align:center; font-size:14px; border-radius: 0 0 5px 5px; cursor:pointer;} .layui-m-layerbtn span[yes]{color: #40AFFE;} .layui-m-layerbtn span[no]{border-right: 1px solid #D0D0D0; border-radius: 0 0 0 5px;} .layui-m-layerbtn span:active{background-color: #F6F6F6;} .layui-m-layerend{position:absolute; right:7px; top:10px; width:30px; height:30px; border: 0; font-weight:400; background: transparent; cursor: pointer; -webkit-appearance: none; font-size:30px;} .layui-m-layerend::before, .layui-m-layerend::after{position:absolute; left:5px; top:15px; content:''; width:18px; height:1px; background-color:#999; transform:rotate(45deg); -webkit-transform:rotate(45deg); border-radius: 3px;} .layui-m-layerend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} /* 底部对话框风格 */ body .layui-m-layer .layui-m-layer-footer{position: fixed; width: 95%; max-width: 100%; margin: 0 auto; left:0; right: 0; bottom: 10px; background: none;} .layui-m-layer-footer .layui-m-layercont{padding: 20px; border-radius: 5px 5px 0 0; background-color: rgba(255,255,255,.8);} .layui-m-layer-footer .layui-m-layerbtn{display: block; height: auto; background: none; border-top: none;} .layui-m-layer-footer .layui-m-layerbtn span{background-color: rgba(255,255,255,.8);} .layui-m-layer-footer .layui-m-layerbtn span[no]{color: #FD482C; border-top: 1px solid #c2c2c2; border-radius: 0 0 5px 5px;} .layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top: 10px; border-radius: 5px;} /* 通用提示 */ body .layui-m-layer .layui-m-layer-msg{width: auto; max-width: 90%; margin: 0 auto; bottom: -150px; background-color: rgba(0,0,0,.7); color: #fff;} .layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;} ================================================ FILE: src/theme/default/layer.css ================================================ /** @Name: layer **/ /* *html{background-image: url(about:blank); background-attachment: fixed;} */ html #layuicss-layer{display: none; position: absolute; width: 1989px;} /* common */ .layui-layer-shade, .layui-layer{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;} .layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3);} .layui-layer-close{position:absolute;} .layui-layer-content{position:relative;} .layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} .layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;} .layui-layer-ico{ background:url(icon.png) no-repeat;} .layui-layer-dialog .layui-layer-ico, .layui-layer-setwin a, .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} .layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;} .layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;} /* 动画 */ .layer-anim{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;} @-webkit-keyframes layer-bounceIn { /* 默认 */ 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} } @keyframes layer-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-00{-webkit-animation-name: layer-bounceIn;animation-name: layer-bounceIn} @-webkit-keyframes layer-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 layer-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:layer-zoomInDown;animation-name:layer-zoomInDown} @-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-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:layer-fadeInUpBig;animation-name:layer-fadeInUpBig} @-webkit-keyframes layer-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 layer-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:layer-zoomInLeft;animation-name:layer-zoomInLeft} @-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-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(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn} @keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn} @-webkit-keyframes layer-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 layer-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:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} /* 标题栏 */ .layui-layer-title{padding:0 80px 0 20px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;} .layui-layer-setwin{position:absolute; right: 15px; *right:0; top: 17px; 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: 1px -40px; cursor: pointer;} .layui-layer-setwin .layui-layer-close1:hover{opacity:0.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 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;} .layui-layer-btn a{height: 28px; line-height: 28px; margin: 5px 5px 0; padding: 0 15px; border: 1px solid #dedede; background-color:#fff; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;} .layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;} .layui-layer-btn a:active{opacity: 0.8;} .layui-layer-btn .layui-layer-btn0{border-color: #1E9FFF; background-color: #1E9FFF; color:#fff;} .layui-layer-btn-l{text-align: left;} .layui-layer-btn-c{text-align: center;} /* 定制化 */ .layui-layer-dialog{min-width: 300px;} .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,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-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;} .layui-layer-nobg{background:none;} .layui-layer-iframe iframe{display: block; width: 100%;} .layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;} .layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;} .layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;} .layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;} .layui-layer-tips{background: none; box-shadow:none; border:none;} .layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; 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-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;} .layui-layer-tips i.layui-layer-TipsT{bottom:-8px;} .layui-layer-tips i.layui-layer-TipsB{top:-8px;} .layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top: 5px; border-bottom-style:solid; border-bottom-color: #000;} .layui-layer-tips i.layui-layer-TipsR{left:-8px;} .layui-layer-tips i.layui-layer-TipsL{right:-8px;} /* skin */ .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: 5px 10px 10px; text-align: right; border-top:1px solid #E9E7E7} .layui-layer-lan .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;} .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; border-color: #009f95;} .layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1;} /** @Name: layer拓展样式 */ .layui-layer-iconext{background:url(icon-ext.png) no-repeat;} /* prompt模式 */ .layui-layer-prompt .layui-layer-input{display: block; width: 260px; height: 36px; margin: 0 auto; line-height: 30px; padding-left: 10px; border: 1px solid #e6e6e6; color: #333;} .layui-layer-prompt textarea.layui-layer-input{width: 300px; height: 100px; line-height: 20px; padding: 6px 10px;} .layui-layer-prompt .layui-layer-content{padding: 20px;} .layui-layer-prompt .layui-layer-btn{padding-top: 0;} /* tab模式 */ .layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);} .layui-layer-tab .layui-layer-title{padding-left:0; overflow: visible;} .layui-layer-tab .layui-layer-title span{position:relative; float:left; min-width:80px; max-width: 300px; padding:0 20px; text-align:center; cursor:default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;} .layui-layer-tab .layui-layer-title span.layui-this{height: 51px; border-left: 1px solid #eee; border-right: 1px solid #eee; 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.layui-this{display: block;} /* photo模式 */ .layui-layer-photos{background: none; box-shadow: none;} .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-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 27px; _width: 44px; height: 44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());} .layui-layer-imgprev{left: 30px; background-position:-5px -5px; _background-position:-70px -5px;} .layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;} .layui-layer-imgnext{right: 30px; _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: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} .layui-layer-imgtit{/*position:absolute; left:20px;*/} .layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;} .layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;} .layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} .layui-layer-imgtit em{padding-left:10px; font-style: normal;} /* 关闭动画 */ @-webkit-keyframes layer-bounceOut { 100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)} 30% {-webkit-transform: scale(1.05); transform: scale(1.05)} 0% {-webkit-transform: scale(1); transform: scale(1);} } @keyframes layer-bounceOut { 100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);} 30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);} 0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);} } .layer-anim-close{-webkit-animation-name: layer-bounceOut; animation-name: layer-bounceOut; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.2s; animation-duration:.2s;} @media screen and (max-width: 1100px) { .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;} } ================================================ FILE: src/theme/moon/style.css ================================================ /* * layer皮肤 * */ html #layui_layer_skinmoonstylecss { display: none; position: absolute; width: 1989px; } body .layer-ext-moon[type="dialog"] { min-width: 320px; } body .layer-ext-moon-msg[type="dialog"]{min-width:200px;} body .layer-ext-moon .layui-layer-title { background: #f6f6f6; color: #212a31; font-size: 16px; font-weight: bold; height: 46px; line-height: 46px; border-bottom: 1px solid #D5D5D5; } body .layer-ext-moon .layui-layer-content .layui-layer-ico { height: 32px; width: 32px; top:18.5px; } body .layer-ext-moon .layui-layer-ico0 { background: url(default.png) no-repeat -96px 0; ; } body .layer-ext-moon .layui-layer-ico1 { background: url(default.png) no-repeat -224px 0; ; } body .layer-ext-moon .layui-layer-ico2 { background: url(default.png) no-repeat -192px 0; } body .layer-ext-moon .layui-layer-ico3 { background: url(default.png) no-repeat -160px 0; } body .layer-ext-moon .layui-layer-ico4 { background: url(default.png) no-repeat -320px 0; } body .layer-ext-moon .layui-layer-ico5 { background: url(default.png) no-repeat -288px 0; } body .layer-ext-moon .layui-layer-ico6 { background: url(default.png) -256px 0; } body .layer-ext-moon .layui-layer-ico7 { background: url(default.png) no-repeat -128px 0; } body .layer-ext-moon .layui-layer-setwin { top: 15px; right: 15px; } body .layer-ext-moon .layui-layer-setwin a { width: 16px; height: 16px; } body .layer-ext-moon .layui-layer-setwin .layui-layer-min cite:hover { background-color: #56abe4; } body .layer-ext-moon .layui-layer-setwin .layui-layer-max { background: url(default.png) no-repeat -80px 0; } body .layer-ext-moon .layui-layer-setwin .layui-layer-max:hover { background: url(default.png) no-repeat -64px 0; } body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin { background: url(default.png) no-repeat -32px 0; } body .layer-ext-moon .layui-layer-setwin .layui-layer-maxmin:hover { background: url(default.png) no-repeat -16px 0; } body .layer-ext-moon .layui-layer-setwin .layui-layer-close1,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2 { background: url(default.png) 0 0; } body .layer-ext-moon .layui-layer-setwin .layui-layer-close1:hover,body .layer-ext-moon .layui-layer-setwin .layui-layer-close2:hover { background: url(default.png) -48px 0; } body .layer-ext-moon .layui-layer-padding{padding-top: 24px;} body .layer-ext-moon .layui-layer-btn { text-align: center; padding-top: 15px; padding-bottom:15px; background: #f0f4f7; border-top: 1px #c7c7c7 solid; } body .layer-ext-moon .layui-layer-btn a { font-size: 12px; font-weight: normal; margin: 0 3px; margin-right: 7px; margin-left: 7px; padding: 6px 20px; color: #fff; border: 1px solid #0064b6; background: #0071ce; border-radius: 3px; display: inline-block; height: 20px; line-height: 20px; text-align: center; vertical-align: middle; background-repeat: no-repeat; text-decoration: none; outline: none; } body .layer-ext-moon .layui-layer-btn .layui-layer-btn0 { background: #0071ce; } body .layer-ext-moon .layui-layer-btn .layui-layer-btn1 { background: #fff; color: #404a58; border: 1px solid #c0c4cd; border-radius: 3px; } body .layer-ext-moon .layui-layer-btn .layui-layer-btn2 { background: #f60; color: #fff; border: 1px solid #f60; border-radius: 3px; } body .layer-ext-moon .layui-layer-btn .layui-layer-btn3 { background: #f00; color: #fff; border: 1px solid #f00; border-radius: 3px; } body .layer-ext-moon .layui-layer-title span.layui-layer-tabnow{ height:47px; } ================================================ FILE: test/demo.html ================================================  layer-更懂你的web弹窗解决方案 
 @Name：layer
 @Version：v
 @Description：通用 Web 弹层组件


【注意事项】
一、使用时，请把文件夹 layer 整个放置在您站点的任何一个目录，只需引入 layer.js 即可，除 jQuery 外，其它文件无需再引入。
二、如果您的 js 引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过 layer.config() 来配置（详见官网 API 页）
三、jQuery 需 1.8+
四、更多使用说明与演示，请参见 layer 官网。
五、使用时请务必保留来源，请勿用于违反我国法律法规的 Web 平台。
六、layer 是一款无偿的公益性项目，遵循 MIT 开源协议。
更多示例 使用文档 关于