diff --git a/mobile/README.md b/mobile/README.md index 1e217a7..fd4f93d 100644 --- a/mobile/README.md +++ b/mobile/README.md @@ -4,11 +4,11 @@ layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview [文档与演示](http://sentsin.com/layui/layer/) -1. 无需依赖任何库，只加载layer.m.js即可 +1. 无需依赖任何库，只加载layer.js即可 2. 小巧玲珑，性能卓越、柔情似水… 3. 具备无以伦比的自适应功能 4. 灵活的皮肤自定义支撑，充分确保弹层风格多样化 5. 丰富、科学的接口，让弹弹弹层无所不能 ## 备注 -[官网](http://sentsin.com/layui/layer/)、[有问必答](http://say.sentsin.com/home-48.html) +[官网](http://layer.layui.com/mobile/)、[有问必答](http://fly.layui.com/) diff --git a/mobile/layer.js b/mobile/layer.js index 53ddfcd..2eb3e28 100644 --- a/mobile/layer.js +++ b/mobile/layer.js @@ -1,2 +1,2 @@ -/*! layer mobile-v1.8 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ -;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:!0},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){var c;return/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)?(a.addEventListener("touchmove",function(){c=!0},!1),void a.addEventListener("touchend",function(a){a.preventDefault(),c||b.call(this,a),c=!1},!1)):a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layermbox"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'

'+(a?c.title[0]:c.title)+'

':""}(),j=function(){var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a=''+c.btn[0]+"",2===b&&(a=''+c.btn[1]+""+a),'
'+a+"
"):""}();if(c.fixed||(c.top=c.hasOwnProperty("top")?c.top:100,c.style=c.style||"",c.style+=" top:"+(b.body.scrollTop+c.top)+"px"),2===c.type&&(c.content=''),f.innerHTML=(c.shade?"
':"")+'
"+g+'
'+c.content+"
"+j+"
",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;if(a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time)),a.title){var e=b[d]("layermend")[0],f=function(){a.cancel&&a.cancel(),layer.close(c.index)};g.touch(e,f)}var h=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var i=b[d]("layermbtn")[0].children,j=i.length,k=0;j>k;k++)g.touch(i[k],h);if(a.shade&&a.shadeClose){var l=b[d]("laymshade")[0];g.touch(l,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"1.8",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window); \ No newline at end of file +/*! layer mobile-v2.0 弹层组件移动版 License LGPL http://layer.layui.com/mobile By 贤心 */ +;!function(a){"use strict";var b=document,c="querySelectorAll",d="getElementsByClassName",e=function(a){return b[c](a)},f={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},g={extend:function(a){var b=JSON.parse(JSON.stringify(f));for(var c in a)b[c]=a[c];return b},timer:{},end:{}};g.touch=function(a,b){a.addEventListener("click",function(a){b.call(this,a)},!1)};var h=0,i=["layui-m-layer"],j=function(a){var b=this;b.config=g.extend(a),b.view()};j.prototype.view=function(){var a=this,c=a.config,f=b.createElement("div");a.id=f.id=i[0]+h,f.setAttribute("class",i[0]+" "+i[0]+(c.type||0)),f.setAttribute("index",h);var g=function(){var a="object"==typeof c.title;return c.title?'

'+(a?c.title[0]:c.title)+"

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

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

"),c.skin&&(c.anim="up"),"msg"===c.skin&&(c.shade=!1),f.innerHTML=(c.shade?"
':"")+'
"+g+'
'+c.content+"
"+j+"
",!c.type||2===c.type){var k=b[d](i[0]+c.type),l=k.length;l>=1&&layer.close(k[0].getAttribute("index"))}document.body.appendChild(f);var m=a.elem=e("#"+a.id)[0];c.success&&c.success(m),a.index=h++,a.action(c,m)},j.prototype.action=function(a,b){var c=this;a.time&&(g.timer[c.index]=setTimeout(function(){layer.close(c.index)},1e3*a.time));var e=function(){var b=this.getAttribute("type");0==b?(a.no&&a.no(),layer.close(c.index)):a.yes?a.yes(c.index):layer.close(c.index)};if(a.btn)for(var f=b[d]("layui-m-layerbtn")[0].children,h=f.length,i=0;h>i;i++)g.touch(f[i],e);if(a.shade&&a.shadeClose){var j=b[d]("layui-m-layershade")[0];g.touch(j,function(){layer.close(c.index,a.end)})}a.end&&(g.end[c.index]=a.end)},a.layer={v:"2.0",index:h,open:function(a){var b=new j(a||{});return b.index},close:function(a){var c=e("#"+i[0]+a)[0];c&&(c.innerHTML="",b.body.removeChild(c),clearTimeout(g.timer[a]),delete g.timer[a],"function"==typeof g.end[a]&&g.end[a](),delete g.end[a])},closeAll:function(){for(var a=b[d](i[0]),c=0,e=a.length;e>c;c++)layer.close(0|a[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var a=document.scripts,c=a[a.length-1],d=c.src,e=d.substring(0,d.lastIndexOf("/")+1);c.getAttribute("merge")||document.head.appendChild(function(){var a=b.createElement("link");return a.href=e+"need/layer.css?2.0",a.type="text/css",a.rel="styleSheet",a.id="layermcss",a}())}()}(window); \ No newline at end of file diff --git a/mobile/need/layer.css b/mobile/need/layer.css index 7d5f746..a07ed85 100644 --- a/mobile/need/layer.css +++ b/mobile/need/layer.css @@ -1 +1 @@ -.layermbox{position:relative;z-index:19891014}.layermmain,.laymshade{position:fixed;left:0;top:0;width:100%;height:100%}.layermbtn span,.layermchild{display:inline-block;position:relative}.laymshade{background-color:rgba(0,0,0,.5);pointer-events:auto}.layermmain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layermmain .section{display:table-cell;vertical-align:middle;text-align:center}.layermchild{text-align:left;background-color:#fff;font-size:14px;border-radius:3px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.18s;animation-duration:.18s}.layermborder{border:1px solid #999}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layermanim{animation-name:bounceIn;-webkit-animation-name:bounceIn}.layermbox0 .layermchild{max-width:90%;min-width:150px}.layermbox1 .layermchild{border:none;border-radius:0}.layermbox2 .layermchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layermchild h3{padding:0 45px 0 10px;height:50px;line-height:50px;font-size:16px;font-weight:400;border-radius:3px 3px 0 0;border-bottom:1px solid #EBEBEB}.layermbtn span,.layermchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layermcont{padding:20px 15px;line-height:22px;text-align:center}.layermbox1 .layermcont{padding:0;text-align:left}.layermbox2 .layermcont{text-align:center;padding:0;line-height:0}.layermbox2 .layermcont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layermbox2 .layermcont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layermbox2 .layermcont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layermbtn{position:relative;height:40px;line-height:40px;font-size:0;text-align:center;border-top:1px solid #EBEBEB}.layermbtn span{width:50%;text-align:center;font-size:14px;cursor:pointer;border-radius:0 3px 0 0}.layermbtn span:first-child{height:39px;background-color:#fff;border-radius:0 0 0 3px}.layermbtn:before{content:'\20';position:absolute;width:1px;height:39px;left:50%;top:0;background-color:#EBEBEB}.layermend{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}.layermend::after,.layermend::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}.layermend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)} \ No newline at end of file +.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-layermain,.layui-m-layershade{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,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-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:0 0;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-layerbtn span,.layui-m-layerchild h3{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%;-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-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.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%;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:-200px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} \ No newline at end of file diff --git a/package.json b/package.json index 6d3b6b5..f447337 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "layer", "version": "2.4", - "mobile": "1.8", + "mobile": "2.0", "description": "弹层组件", "main": "", "scripts": { diff --git a/src/mobile/layer.js b/src/mobile/layer.js index 43363cf..1d97d9e 100644 --- a/src/mobile/layer.js +++ b/src/mobile/layer.js @@ -1,13 +1,14 @@ /*! - @Name：layer mobile v1.8 弹层组件移动版 + @Name：layer mobile v2.0 弹层组件移动版 @Author：贤心 @Site：http://layer.layui.com/mobie/ @License：LGPL */ -;!function(win){ +;!function(win){ + "use strict"; var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassName', S = function(s){ @@ -16,11 +17,11 @@ var doc = document, query = 'querySelectorAll', claname = 'getElementsByClassNam //默认配置 var config = { - type: 0, - shade: true, - shadeClose: true, - fixed: true, - anim: true + type: 0 + ,shade: true + ,shadeClose: true + ,fixed: true + ,anim: 'scale' //默认动画类型 }; var ready = { @@ -36,23 +37,12 @@ var ready = { //点触事件 ready.touch = function(elem, fn){ - var move; - if(!/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/.test(navigator.userAgent)){ - return elem.addEventListener('click', function(e){ - fn.call(this, e); - }, false); - } - elem.addEventListener('touchmove', function(){ - move = true; + elem.addEventListener('click', function(e){ + fn.call(this, e); }, false); - elem.addEventListener('touchend', function(e){ - e.preventDefault(); - move || fn.call(this, e); - move = false; - }, false); }; -var index = 0, classs = ['layermbox'], Layer = function(options){ +var index = 0, classs = ['layui-m-layer'], Layer = function(options){ var that = this; that.config = ready.extend(options); that.view(); @@ -64,24 +54,27 @@ Layer.prototype.view = function(){ 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) +'

' + ? '

'+ (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] +'' + btndom = ''+ config.btn[0] +'' if(btns === 2){ - btndom = ''+ config.btn[1] +'' + btndom; + btndom = ''+ config.btn[1] +'' + btndom; } - return '
'+ btndom + '
'; + return '
'+ btndom + '
'; }()); if(!config.fixed){ @@ -91,15 +84,18 @@ Layer.prototype.view = function(){ } if(config.type === 2){ - config.content = ''; + config.content = '

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

'; } - layerbox.innerHTML = (config.shade ? '
' : '') - +'
' - +'
' - +'
' + if(config.skin) config.anim = 'up'; + if(config.skin === 'msg') config.shade = false; + + layerbox.innerHTML = (config.shade ? '
' : '') + +'
' + +'
' + +'
' + title - +'
'+ config.content +'
' + +'
'+ config.content +'
' + button +'
' +'
' @@ -130,15 +126,6 @@ Layer.prototype.action = function(config, elem){ }, config.time*1000); } - //关闭按钮 - if(config.title){ - var end = elem[claname]('layermend')[0], endfn = function(){ - config.cancel && config.cancel(); - layer.close(that.index); - }; - ready.touch(end, endfn); - } - //确认取消 var btn = function(){ var type = this.getAttribute('type'); @@ -150,7 +137,7 @@ Layer.prototype.action = function(config, elem){ } }; if(config.btn){ - var btns = elem[claname]('layermbtn')[0].children, btnlen = btns.length; + var btns = elem[claname]('layui-m-layerbtn')[0].children, btnlen = btns.length; for(var ii = 0; ii < btnlen; ii++){ ready.touch(btns[ii], btn); } @@ -158,7 +145,7 @@ Layer.prototype.action = function(config, elem){ //点遮罩关闭 if(config.shade && config.shadeClose){ - var shade = elem[claname]('laymshade')[0]; + var shade = elem[claname]('layui-m-layershade')[0]; ready.touch(shade, function(){ layer.close(that.index, config.end); }); @@ -168,7 +155,7 @@ Layer.prototype.action = function(config, elem){ }; win.layer = { - v: '1.8', + v: '2.0', index: index, //核心方法 @@ -185,7 +172,7 @@ win.layer = { clearTimeout(ready.timer[index]); delete ready.timer[index]; typeof ready.end[index] === 'function' && ready.end[index](); - delete ready.end[index]; + delete ready.end[index]; }, //关闭所有layer层 @@ -209,7 +196,7 @@ win.layer = { document.head.appendChild(function(){ var link = doc.createElement('link'); - link.href = path + 'need/layer.css'; + link.href = path + 'need/layer.css?2.0'; link.type = 'text/css'; link.rel = 'styleSheet' link.id = 'layermcss'; diff --git a/src/mobile/need/layer.css b/src/mobile/need/layer.css index 552284d..9106c0d 100644 --- a/src/mobile/need/layer.css +++ b/src/mobile/need/layer.css @@ -1,56 +1,87 @@ -/* layer弹层移动版样式 */ + +/* + layer mobile +*/ -.layermbox{position:relative; z-index:19891014;} -.laymshade, -.layermmain{position:fixed; left:0; top:0; width:100%; height:100%;} -.laymshade{background-color:rgba(0,0,0, .5); pointer-events:auto;} -.layermmain{display:table; font-family: Helvetica, arial, sans-serif; pointer-events: none;} -.layermmain .section{display:table-cell; vertical-align:middle; text-align:center;} -.layermchild{position:relative; display:inline-block; text-align:left; background-color:#fff; font-size:14px; border-radius:3px; box-shadow:0 0 8px rgba(0, 0, 0, 0.1); pointer-events:auto; -webkit-overflow-scrolling: touch;} -.layermchild{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .18s; animation-duration: .18s;} -.layermborder{border:1px solid #999;} -@-webkit-keyframes bounceIn { /* 默认 */ - 0% { - opacity: 0; - -webkit-transform: scale(.5); - transform: scale(.5) - } - 100% { - opacity: 1; - -webkit-transform: scale(1); - transform: scale(1) - } +.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)} } -.layermanim{animation-name: bounceIn; -webkit-animation-name: bounceIn;} +@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;} -.layermbox0 .layermchild{max-width:90%; min-width:150px;} -.layermbox1 .layermchild{border:none; border-radius:0;} -.layermbox2 .layermchild{width:auto; max-width:260px; min-width:40px; border:none; background: none; box-shadow: none; color:#fff;} -.layermchild h3{padding:0 45px 0 10px; height:50px; line-height:50px; border-bottom:1px solid #EBEBEB; font-size:16px; font-weight:400; border-radius:3px 3px 0 0; border-bottom:1px solid #EBEBEB;} -.layermchild h3, -.layermbtn span{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} -.layermcont{padding:20px 15px; line-height:22px; text-align:center;} -.layermbox1 .layermcont{padding:0; text-align:left;} -.layermbox2 .layermcont{text-align:center; padding: 0; line-height: 0;} -.layermbox2 .layermcont i{width:25px; height:25px; margin-left:8px; display:inline-block; background-color:#fff; border-radius:100%;} -.layermbox2 .layermcont i{-webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} -@-webkit-keyframes bouncedelay{ +@-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 bouncedelay{ +@keyframes layui-m-anim-loading{ 0%,80%,100%{transform:scale(0); -webkit-transform:scale(0)} 40%{transform:scale(1); -webkit-transform:scale(1)} } -.layermbox2 .layermcont i:first-child{margin-left:0; -webkit-animation-delay: -.32s; animation-delay: -.32s;} -.layermbox2 .layermcont i.laymloadtwo{-webkit-animation-delay: -.16s; animation-delay: -.16s;} -.layermbox2 .layermcont>div{line-height:22px; padding-top:7px; margin-bottom:20px; font-size: 14px;} -.layermbtn{position:relative; height:40px; line-height:40px; font-size:0; text-align:center; border-top:1px solid #EBEBEB;} -.layermbtn span{position:relative; display:inline-block; width:50%; text-align:center; font-size:14px; cursor:pointer; border-radius: 0 3px 0 0;} -.layermbtn span:first-child{height:39px; background-color:#fff; border-radius: 0 0 0 3px;} -.layermbtn:before{content:'\20'; position:absolute; width:1px; height:39px; left:50%; top:0; background-color:#EBEBEB;} -.layermend{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;} -.layermend::before, .layermend::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;} -.layermend::after{transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} +.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: -200px; background-color: rgba(0,0,0,.7); color: #fff;} +.layui-m-layer-msg .layui-m-layercont{padding: 10px 20px;} +