mirror of https://github.com/layui/layer
2.4
sentsin
parent
77ecf930e1
commit
2655f9a06c
|
|
@ -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-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)}
|
||||
.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)}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "layer",
|
||||
"version": "2.3",
|
||||
"version": "2.4",
|
||||
"mobile": "1.8",
|
||||
"description": "弹层组件",
|
||||
"main": "",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
29
src/layer.js
29
src/layer.js
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
|
||||
@Name：layer v2.3 弹层组件
|
||||
@Name：layer v2.4 弹层组件
|
||||
@Author：贤心
|
||||
@Site：http://layer.layui.com
|
||||
@License：LGPL
|
||||
|
|
@ -30,7 +30,7 @@ var $, win, ready = {
|
|||
|
||||
//默认内置方法。
|
||||
var layer = {
|
||||
v: '2.3',
|
||||
v: '2.4',
|
||||
ie6: !!window.ActiveXObject&&!window.XMLHttpRequest,
|
||||
index: 0,
|
||||
path: ready.getPath,
|
||||
|
|
@ -150,6 +150,7 @@ var layer = {
|
|||
closeBtn: false,
|
||||
time: 3000,
|
||||
shade: false,
|
||||
fix: false,
|
||||
maxWidth: 210
|
||||
}, options));
|
||||
}
|
||||
|
|
@ -202,7 +203,7 @@ Class.pt.vessel = function(conType, callback){
|
|||
config.shade ? ('<div class="layui-layer-shade" id="layui-layer-shade'+ times +'" times="'+ times +'" style="'+ ('z-index:'+ (zIndex-1) +'; background-color:'+ (config.shade[1]||'#000') +'; opacity:'+ (config.shade[0]||config.shade) +'; filter:alpha(opacity='+ (config.shade[0]*100||config.shade*100) +');') +'"></div>') : '',
|
||||
|
||||
//主体
|
||||
'<div class="'+ doms[0] +' '+ (doms.anim[config.shift]||'') + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fix ? '' : ';position:absolute;') +'">'
|
||||
'<div class="'+ doms[0] + (' layui-layer-'+ready.type[config.type]) + (((config.type == 0 || config.type == 2) && !config.shade) ? ' layui-layer-border' : '') + ' ' + (config.skin||'') +'" id="'+ doms[0] + times +'" type="'+ ready.type[config.type] +'" times="'+ times +'" showtime="'+ config.time +'" conType="'+ (conType ? 'object' : 'string') +'" style="z-index: '+ zIndex +'; width:'+ config.area[0] + ';height:' + config.area[1] + (config.fix ? '' : ';position:absolute;') +'">'
|
||||
+ (conType && config.type != 2 ? '' : titleHTML)
|
||||
+'<div id="'+ (config.id||'') +'" class="layui-layer-content'+ ((config.type == 0 && config.icon !== -1) ? ' layui-layer-padding' :'') + (config.type == 3 ? ' layui-layer-loading'+config.icon : '') +'">'
|
||||
+ (config.type == 0 && config.icon !== -1 ? '<i class="layui-layer-ico layui-layer-ico'+ config.icon +'"></i>' : '')
|
||||
|
|
@ -257,7 +258,6 @@ Class.pt.creat = function(){
|
|||
config.follow = config.content[1];
|
||||
config.content = config.content[0] + '<i class="layui-layer-TipsG"></i>';
|
||||
config.title = false;
|
||||
config.fix = false;
|
||||
config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
|
||||
config.tipsMore || layer.closeAll('tips');
|
||||
break;
|
||||
|
|
@ -300,6 +300,12 @@ Class.pt.creat = function(){
|
|||
layer.close(that.index)
|
||||
}, config.time);
|
||||
that.move().callback();
|
||||
|
||||
//为兼容jQuery3.0的css动画影响元素尺寸计算
|
||||
if(doms.anim[config.shift]){
|
||||
that.layero.addClass(doms.anim[config.shift]);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
//自适应
|
||||
|
|
@ -426,7 +432,10 @@ Class.pt.tips = function(){
|
|||
'background-color': config.tips[1],
|
||||
'padding-right': (config.closeBtn ? '30px' : '')
|
||||
});
|
||||
layero.css({left: goal.tipLeft, top: goal.tipTop});
|
||||
layero.css({
|
||||
left: goal.tipLeft - (config.fix ? win.scrollLeft() : 0),
|
||||
top: goal.tipTop - (config.fix ? win.scrollTop() : 0)
|
||||
});
|
||||
}
|
||||
|
||||
//拖拽层
|
||||
|
|
@ -551,8 +560,8 @@ Class.pt.callback = function(){
|
|||
|
||||
//最小化
|
||||
layero.find('.layui-layer-min').on('click', function(){
|
||||
layer.min(that.index, config);
|
||||
config.min && config.min(layero);
|
||||
var min = config.min && config.min(layero);
|
||||
min === false || layer.min(that.index, config);
|
||||
});
|
||||
|
||||
//全屏/还原
|
||||
|
|
@ -562,7 +571,9 @@ Class.pt.callback = function(){
|
|||
config.restore && config.restore(layero);
|
||||
} else {
|
||||
layer.full(that.index, config);
|
||||
setTimeout(function(){
|
||||
config.full && config.full(layero);
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -619,8 +630,8 @@ Class.pt.openLayer = function(){
|
|||
|
||||
ready.record = function(layero){
|
||||
var area = [
|
||||
layero.outerWidth(),
|
||||
layero.outerHeight(),
|
||||
layero.width(),
|
||||
layero.height(),
|
||||
layero.position().top,
|
||||
layero.position().left + parseFloat(layero.css('margin-left'))
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.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;}
|
||||
.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 { /* 默认 */
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ html #layui_layer_skinlayercss{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; box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
|
||||
.layui-layer-close{position:absolute;}
|
||||
.layui-layer-content{position:relative;}
|
||||
|
|
@ -124,7 +125,7 @@ html #layui_layer_skinlayercss{display:none; position: absolute; width:1989px;}
|
|||
|
||||
/* 定制化 */
|
||||
.layui-layer-dialog{min-width:260px;}
|
||||
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break:break-all; overflow:hidden; font-size:14px; overflow:auto;}
|
||||
.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;}
|
||||
|
|
|
|||
|
|
@ -62,10 +62,6 @@ pre{font-family:'微软雅黑'}
|
|||
<script>
|
||||
;!function(){
|
||||
|
||||
//加载扩展模块
|
||||
layer.config({
|
||||
extend: 'extend/layer.ext.js'
|
||||
});
|
||||
|
||||
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
|
||||
layer.ready(function(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue