mirror of https://github.com/layui/layer
layer mobile 2.0
sentsin
parent
65b5e601e5
commit
82249ab0a7
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -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?'<h3 style="'+(a?c.title[1]:"")+'">'+(a?c.title[0]:c.title)+'</h3><button class="layermend"></button>':""}(),j=function(){var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a='<span type="1">'+c.btn[0]+"</span>",2===b&&(a='<span type="0">'+c.btn[1]+"</span>"+a),'<div class="layermbtn">'+a+"</div>"):""}();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='<i></i><i class="laymloadtwo"></i><i></i>'),f.innerHTML=(c.shade?"<div "+("string"==typeof c.shade?'style="'+c.shade+'"':"")+' class="laymshade"></div>':"")+'<div class="layermmain" '+(c.fixed?"":'style="position:static;"')+'><div class="section"><div class="layermchild '+(c.className?c.className:"")+" "+(c.type||c.shade?"":"layermborder ")+(c.anim?"layermanim":"")+'" '+(c.style?'style="'+c.style+'"':"")+">"+g+'<div class="layermcont">'+c.content+"</div>"+j+"</div></div></div>",!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);
|
||||
/*! 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?'<h3 style="'+(a?c.title[1]:"")+'">'+(a?c.title[0]:c.title)+"</h3>":""}(),j=function(){"string"==typeof c.btn&&(c.btn=[c.btn]);var a,b=(c.btn||[]).length;return 0!==b&&c.btn?(a='<span yes type="1">'+c.btn[0]+"</span>",2===b&&(a='<span no type="0">'+c.btn[1]+"</span>"+a),'<div class="layui-m-layerbtn">'+a+"</div>"):""}();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='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(c.content||"")+"</p>"),c.skin&&(c.anim="up"),"msg"===c.skin&&(c.shade=!1),f.innerHTML=(c.shade?"<div "+("string"==typeof c.shade?'style="'+c.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(c.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(c.skin?"layui-m-layer-"+c.skin+" ":"")+(c.className?c.className:"")+" "+(c.anim?"layui-m-anim-"+c.anim:"")+'" '+(c.style?'style="'+c.style+'"':"")+">"+g+'<div class="layui-m-layercont">'+c.content+"</div>"+j+"</div></div></div>",!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);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"version": "2.4",
|
||||
"mobile": "1.8",
|
||||
"mobile": "2.0",
|
||||
"description": "弹层组件",
|
||||
"main": "",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
|
||||
@Name：layer mobile v1.8 弹层组件移动版
|
||||
@Name：layer mobile v2.0 弹层组件移动版
|
||||
@Author：贤心
|
||||
@Site：http://layer.layui.com/mobie/
|
||||
@License：LGPL
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
*/
|
||||
|
||||
;!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;
|
||||
}, false);
|
||||
elem.addEventListener('touchend', function(e){
|
||||
e.preventDefault();
|
||||
move || fn.call(this, e);
|
||||
move = false;
|
||||
elem.addEventListener('click', function(e){
|
||||
fn.call(this, e);
|
||||
}, 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();
|
||||
|
|
@ -65,23 +55,26 @@ Layer.prototype.view = function(){
|
|||
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
|
||||
? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3><button class="layermend"></button>'
|
||||
? '<h3 style="'+ (titype ? config.title[1] : '') +'">'+ (titype ? config.title[0] : config.title) +'</h3>'
|
||||
: '';
|
||||
}());
|
||||
|
||||
//按钮区域
|
||||
var button = (function(){
|
||||
typeof config.btn === 'string' && (config.btn = [config.btn]);
|
||||
var btns = (config.btn || []).length, btndom;
|
||||
if(btns === 0 || !config.btn){
|
||||
return '';
|
||||
}
|
||||
btndom = '<span type="1">'+ config.btn[0] +'</span>'
|
||||
btndom = '<span yes type="1">'+ config.btn[0] +'</span>'
|
||||
if(btns === 2){
|
||||
btndom = '<span type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
btndom = '<span no type="0">'+ config.btn[1] +'</span>' + btndom;
|
||||
}
|
||||
return '<div class="layermbtn">'+ btndom + '</div>';
|
||||
return '<div class="layui-m-layerbtn">'+ btndom + '</div>';
|
||||
}());
|
||||
|
||||
if(!config.fixed){
|
||||
|
|
@ -91,15 +84,18 @@ Layer.prototype.view = function(){
|
|||
}
|
||||
|
||||
if(config.type === 2){
|
||||
config.content = '<i></i><i class="laymloadtwo"></i><i></i>';
|
||||
config.content = '<i></i><i class="layui-m-layerload"></i><i></i><p>'+ (config.content||'') +'</p>';
|
||||
}
|
||||
|
||||
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="laymshade"></div>' : '')
|
||||
+'<div class="layermmain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||||
+'<div class="section">'
|
||||
+'<div class="layermchild '+ (config.className ? config.className : '') +' '+ ((!config.type && !config.shade) ? 'layermborder ' : '') + (config.anim ? 'layermanim' : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||||
if(config.skin) config.anim = 'up';
|
||||
if(config.skin === 'msg') config.shade = false;
|
||||
|
||||
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="layui-m-layershade"></div>' : '')
|
||||
+'<div class="layui-m-layermain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
|
||||
+'<div class="layui-m-layersection">'
|
||||
+'<div class="layui-m-layerchild '+ (config.skin ? 'layui-m-layer-' + config.skin + ' ' : '') + (config.className ? config.className : '') + ' ' + (config.anim ? 'layui-m-anim-' + config.anim : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
|
||||
+ title
|
||||
+'<div class="layermcont">'+ config.content +'</div>'
|
||||
+'<div class="layui-m-layercont">'+ config.content +'</div>'
|
||||
+ button
|
||||
+'</div>'
|
||||
+'</div>'
|
||||
|
|
@ -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,
|
||||
|
||||
//核心方法
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue