'update'

CHANGELOG.md

@@ -1,231 +0,0 @@
-
-# v3.2.0
-
-* 优化 prompt 层初始赋值 value 时的光标会出现在最后（之前版本会在最前）
-* 各项细节优化
-
----
-
-
-# v3.1.1 2017.12.05
-
-* 优化自动获取路径代码，以解决部分浏览器下的某些场景无法自动加载样式问题
-
----
-
-# v3.1.0 2017.09.13
-
-* 紧急修复在最新版 Chrome（61.0.3163.79）下遮罩层出现的奇异花屏现象 
-* 修复 layer.js 未设置btnAlign时，包裹按钮的 div.layui-layer-btn 出现一多余 class
-* 对默认按钮颜色、Tips层、Prompt层、Tab层等进行了样式调整，以便更显大气，且更符合layui风格
-* 增加maxHeight参数，用于设定弹层的最大高度 
-* 去除 type:2 时如果content未填写而弹出 layer 官网的默认设置
-
-
----
-
-
-# v3.0.3 2017.03.06
-
-* 增加参数 isOutAnim，用于控制是否显示关闭动画，true 或者 false
-* 撤销自动ready处理机制，因为在初始时与Ajax同步等使用场景存在耦合等问题
-* 修复Firefox下对默认层设置了高度，按钮被溢出的bug
-* photos层的出场动画不再是随机，而是采用默认动画（也可以通过参数 anim 来自定义）
-* 去除photos层的默认关闭动画（觉得觉得不闪眼的话，也可以通过参数isOutAnim开启）
-
-
----
-
-
-# v3.0.2 2017.02.25
-
-* 新增 resizing 回调，用于监听窗口的调整大小
-* 增加自动ready处理机制，即如果你页面一打开就执行弹层，无需放入layer.ready中
-* 对moveEnd回调返回一个参数为当前容器的DOM对象
-* 添加一个amd条件,避免 define出错（Merge pull request #42 from wangyateng/master）
-* 修复tab,photos,prompt弹层默认success回调被覆盖导致功能不正常的问题（来自github用户 @waychan23 的友情提醒）
-* 完善多按钮场景换行的间距（之前是紧贴在一起，略不雅观）
-* 弹出图片层的动画时间改为800ms
-* 修复按方向键切换图片层过快时重复弹出的bug
-* 修复与animate.css可能存在的动画冲突
-
-
----
-
-
-# v3.0 2016.11.07
-
-* 新增拖动弹层右下角可调节弹层尺寸的功能，由参数resize控制，默认开启。对loading、tips层无效
-* offset参数新增 t、r、b、l、lt、lb、rt、rb、的赋值，可快捷实现上、右、下、左、左上角、左下角、右上角、右下角的边缘定位
-* 新增btnAlign参数，支持三个参数：l/c/r，分别用于控制按钮居左、居中、居右的快捷设置（默认r，即居右）
-* 点击最小化时，自动定位到页面左下角，在出现多个最小化时，会依次排列，这是一次较为重大的完善。
-* 新增关闭层的过度动画（可通过 anim: -1 统一取消动画）
-
-* 重写拖拽核心代码，性能大幅度提升
-* layer.config核心调整
-* layer.config中的extend参数只提供加载一个css皮肤文件（详见文档）
-* 处理在head标签中执行layer弹层无效的情况
-* 瘦身layer.ready方法
-* 修改iframe层的loading动画
-* 捕获页类型的弹层在关闭时，会根据所捕获元素的初始display值，进行不同处理，即不再强制隐藏。
-
-* 剔除moveType参数，只提供默认的一种拖拽风格
-* 剔除语义欠佳的fix参数，改为fixed取代
-* 剔除语义欠佳的shift参数，改为anim取代，不过仍然对shift参数兼容
-
-* 完善tips层细节
-* 将prompt层改成页面层结构，即当你弹出prompt层时，再弹出msg，不会将prompt销毁。
-* prompt层的textarea模式支持area参数来设定宽高
-* layer.css大面积改善
-* 降解IE6的fixed支持，不过仍然对ie6兼容（话说现在全浏览器兼容的组件已经不多了，layer后续会整理出不兼容ie6/7的版本）
-
-* 修改图片超出屏幕后，重新计算大小的算法（Merge pull request from 390029659/master）
-* 修复iframe层在用于iPhone设备时，无法触发滚动的Bug
-
-
----
-
-
-# v2.4 2016.07.03
-
-* 兼容jQuery3.0
-* 优化tips，可支持配置参数fix（之前是强制fix: false），用于决定是固定的tips还是非固定的。
-* min回调可通过return false来设定不执行默认最小化。
-* 修复在移动端使用iframe，IOS下无法滑动的bug。
-* 细节优化及样式微调
-
-# 【v2.3】2016.05.18
-* 通过对使用频率的调查，将layer.ext.js（拓展模块）合并到了layer.js，即不用再通过layer.config来加载调用。
-* cancel回调不再对第二个按钮有效，只作为右上角关闭按钮触发。并且除yes回调外，所以按钮的回调都可以通过return false来设定不默认关闭。
-* 修复相册层，点击任意图片查看，弹出的并非当前图片的bug。
-* 修复相册层在移动端显示不佳的bug。
-* 修复msg、alert等对话框类型的弹层，在手机使用时未水平居中的bug。
-
-# 【v2.2】2016.03.18
-* 增加参数id，用于控制弹层唯一标识。如不想重复弹出，可设置该值。
-* layer.tips允许出现遮罩，即不对shade参数做限制。
-* 对layer.photos方法直接弹出页面图片进行了事件委托，修复了之前由于动态插入的img而无法执行弹出的bug，并且修复了当图片信息改变时，仍然弹出了之前的图片的bug
-* layer.photos方法多处代码进行了优化
-* 对layer.tab方法新增回调函数change，用于监听选项卡的切换事件，返回一个选项卡索引参数。
-* 样式微调
-
-
-# 【v2.1】2015.11.04
-* 修复在使用seajs或者requirejs后，layer.ext.js报layer未定义的错误。
-* 修复弹出层后，回车键无效的bug。
-* 修复iframe层的success回调在ie8以下浏览器无效的bug
-* 修复只有一张图片时，并且该图片地址异常，不断弹出提示的bug。
-* 修复当设定moveEnd回调，即便层关闭，仍然触发该回调的bug
-* 即便采用模块加载，layer对象仍然保留全局，原因是layer自有模块需要。
-* 优化图标锯齿消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){}
-
-
-# 【v2.0】2015.09.01
-* 全新的默认皮肤
-* 修复按住Enter键时，出现不断弹层的bug。
-* 修复模块加载时，layer仍然暴露给了全局的bug。
-* 修复拖拽完毕回调moveEnd，在层关闭后拖拽鼠标仍然触发该回调的bug。
-* 确认和取消的回调除了yes和cancel外，还可用btn1/btn2。 btn2可解决取消遇右上角关闭共用cancel回调的问题。即如果你只需要接受取消的回调，可以使用 btn2: function(){}
-
-### 拓展模块
-* 修复通过script标签引入layer.ext.js时，出现Cannot read property 'skin' of undefined的报错问题。（虽然我们更推荐用layer.config()方式加载layer.ext.js）。
-* 如果相册只有一张图片，则不触发上/下一张。
-
-
----
-
-
-# 【v1.9.3】2015.05.23
-* 修复全局设置皮肤时，部分类型层未起作用的bug。
-* 增加skin值：layui-layer-rim，用于给层加边框（类似1.85的风格）
-* 样式微调
-
-### 拓展模块
-* 修复相册层设定基础参数时，只有首次有效的bug。
-
-
-# 【v1.9.2】2015.05.08
-* 增加关闭动画样式：layui-layer-close
-* 优化默认弹出动画
-* 优化默认图标，默认的icon支持缩减到0-6（拓展皮肤可自己任意设定支持的数目）
-* 优化部分样式
-* 机智地修复了一个隐藏得非常深的但是不是太重要的bug。
-* 剔除了一些图片。
-
-# 【v1.9.1】2015.04.29
-* btn设定多个按钮时，新增对应的回调（支持只有yes和cancel回调）,如btn: ['按钮一','按钮二','按钮三']，按钮一和按钮二还是之前的yes和cancel，按钮三，则回调为 btn3: function(){}，以此类推。
-* 对cancel回调进行了微完善，如果不想关闭，return false即可，如cancel: function(){return false}，取消则不会关闭。
-* 修复当设置了fix:false时,offset的设置无效的bug
-* 为低版本IE回收iframe占用的内存，从而修复偶尔无法获焦的bug
-* 修复当设置了btn时，最小化不能愉快地呈现的bug。
-* 修复全局设置skin时，某些层类型出现样式异常的bug。
-* 修复area设置了百分比时，maxmin参数无效的bug。
-* 完善当采用script标签合并路径的方式引入layer，加载了错误的css路径的问题。这种情况需在script标签上加一个自定义属性merge="true",然后通过layer.config({path: 'layer所在目录'})来完成初始化的配置
-* 样式微调
-
-# 【v1.9.0】2015.04.19
-
-* 新增laye.open(options)，抛弃了之前的$.layer(options)调用方法，目的是与layer mobile保持统一。
-* 新增layer.config(options)方法，用于进行全局化配置。除了用于展现弹层的基础参数外，还支持path，用于模块化加载layer时设定目录以便加载所需配件，如layer.config({path: '所在路径', extend: ''});
-* 新增content参数，用于统一传入内容。支持string类型和jquery dom对象。如果是type:2，即iframe的url。
-* 新增icon参数，用于统一配置对话框和loading的icon类型。
-* 新增cancel参数，用于统一取消回调。
-* 新增skin参数，用于控制层的不同外观。
-* 新增layer.ready(path, callback)，用于页面加载时即调用弹层。如果通过layer.config配置了path，此方法的path可以不填，即直接layer.ready(callback);
-* 新增tipsMore，用于开启多个tips
-* 新增scrollbar，用于设定是否屏蔽浏览器滚动条
-
-* 完善offset参数，除了跟之前一样，[Y坐标, X坐标]，还支持传入'rd'，表示右下角。另外还支持只传入Y坐标，如offset: '120px'。默认'auto',即垂直水平居中。
-* 完善自适应，只要设定了固定高度，任何层都会自适应出现滚动条
-* 完善shift，全新的CSS3动画模式，支持传入0-6。
-* 完善area，支持传入宽度、[宽，高],默认'auto'，表示自适应
-* 完善time，传入值改为毫秒，比如2秒关闭，time: 2000
-* 完善use方法，修复之前初始调用时部分浏览器一些不稳定因素
-* 完善layer.full/layer.min方法，只要传入index即可，不用跟之前一样还要传入area和offset。。。
-* layer.alert/confirm/msg/load/tips五种快捷引用重写，更灵活，更易使用。
-
-* 剔除border参数，因为它没有本质的作用，自定义层样式可以通过新增的skin参数
-* 剔除dialog的msg，page的html/url/dom，统一采用content
-* 剔除dialog和loading的type，统一采用icon
-* 剔除dialog中用于配置按钮数的btns，因为可直接通过btn本身来获取。
-* 剔除no和close回调，统一采用cancel取代，不过仍然对前两者兼容。
-* 剔除layer.closeLoad()、layer.closeTips()方法，统一用layer.closeAll('loading/tips')来对指定类型层进行关闭
-* 剔除bgcolor参数，因为自定义的样式一律采用skin参数控制
-* 剔除tips一些列子元素，只保留自身，并且支持number和object形，用于设定方向和显示箭头。
-* 剔除layer.getIndex方法，获取索引统一用返回值
-* 剔除layer.autoArea方法，因为已经采取更好的自适应方案。
-
-* 默认不显示dialog图标，需要显示配置dialog指定的type即可
-* 很多不可见只可感受的细节改动
-
-###  拓展模块 
-* layer.prompt/layer.tab/layer.photos重写，代码更强健，功能更强大，详见Api。
-
-
-总之！总之…layer1.9.0有着太多的调整，爱她，就认真去感受她！么么哒
-
-——贤心 2015/4/15
-
-
----
-
-
-
-# 【v1.8.5】
-* 新增对title样式的自定义控制
-* 修复layer.prompt多行文本，设置默认值无效的bug
-
-# 【v1.8.4】
-* 新增浏览器窗口尺寸改变时的自适应定位
-* 新增属性shift，用于配置动画弹出（需要注意的是，之前的layer.shift()方法将在layer1.9遗弃，用shift属性取代）
-* 新增方法layer.title(name, index); 用于动态改变层的标题。
-* 修改弹出层默认初始坐标为垂直左右居中。
-* 开放多个tips，可通过配置tips: {more: true}开启。
-* 进一步完善tips的智能定位。
-* 放弃layer.ready方法，用jQuery的ready取代。
-* 进一步优化内部代码
-
-###  拓展模块 
-* layer.prompt支持给表单传入默认值，如layer.prompt({val:'默认'}); 新增yes回调函数第二个参数为索引、第三个参数为表单元素。
-* 相册层新增tab回调函数，用于切换图片时进行相关操作
-* 相册层内部代码优化。

bower.json

@@ -1,17 +0,0 @@
-{
-  "name": "layer",
-  "main": "src/layer.js",
-  "version": "3.3.0",
-  "homepage": "https://github.com/sentsin/layer",
-  "description": "Web 通用弹出层组件",
-  "moduleType": [
-    "amd",
-    "globals"
-  ],
-  "keywords": [
-    "layer",
-    "layui",
-    "dialog"
-  ],
-  "license": "MIT"
-}

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "layui-layer",
+  "name": "layui/layer",
   "realname": "layer",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "mobile": "2.0.0",
   "description": "Web 通用弹出层组件",
   "main": "src/layer.js",
@@ -29,6 +29,7 @@
   },
   "dependencies": {},
   "keywords": [
+    "layui",
     "layer",
     "dialog",
     "tips",

src/layer.js

@@ -37,16 +37,20 @@ var isLayui = window.layui && layui.define, $, win, ready = {
     return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
   },
   
-  //载入CSS配件
+  //载入 CSS 依赖
   link: function(href, fn, cssname){
-    
     //未设置路径，则不主动加载css
     if(!layer.path) return;
     
-    var head = document.getElementsByTagName("head")[0], link = document.createElement('link');
+    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, timeout = 0;
+    var id = 'layuicss-'+ app
+    ,STAUTS_NAME = 'creating'
+    ,timeout = 0;
     
     link.rel = 'stylesheet';
     link.href = layer.path + href;
@@ -59,18 +63,37 @@ var isLayui = window.layui && layui.define, $, win, ready = {
     if(typeof fn !== 'function') return;
 
     //轮询 css 是否加载完毕
-    (function poll() {
+    (function poll(status) {
-      if(++timeout > 8 * 1000 / 100){
+      var delay = 100
-        return window.console && console.error('layer.css: Invalid');
+      ,getLinkElem = document.getElementById(id); //获取动态插入的 link 元素
+      
+      //如果轮询超过指定秒数，则视为请求文件失败或 css 文件不符合规范
+      if(++timeout > 10 * 1000 / delay){
+        return window.console && console.error(app +'.css: Invalid');
       };
-      parseInt(ready.getStyle(document.getElementById(id), 'width')) === 1989 ? fn() : setTimeout(poll, 100);
+      
+      //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.3.0',
+  v: '3.4.0',
   ie: function(){ //ie版本
     var agent = navigator.userAgent.toLowerCase();
     return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
@@ -346,7 +369,7 @@ Class.pt.creat = function(){
   }
   
   config.time <= 0 || setTimeout(function(){
-    layer.close(that.index)
+    layer.close(that.index);
   }, config.time);
   that.move().callback();
   
@@ -904,7 +927,8 @@ layer.title = function(name, index){
 };
 
 //关闭layer总方法
-layer.close = function(index){
+layer.close = function(index, callback){
+  layer.ready(function(){
     var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
     if(!layero[0]) return;
     var WRAP = 'layui-layer-wrap', remove = function(){
@@ -930,6 +954,7 @@ layer.close = function(index){
       }
       typeof ready.end[index] === 'function' && ready.end[index]();
       delete ready.end[index];
+      typeof callback === 'function' && callback();
     };
     
     if(layero.data('isOutAnim')){
@@ -951,16 +976,25 @@ layer.close = function(index){
         remove();
       }, 200);
     }
+  });
 };
 
 //关闭所有层
-layer.closeAll = function(type){
+layer.closeAll = function(type, callback){
-  $.each($('.'+doms[0]), function(){
+  if(typeof type === 'function'){
+    callback = type;
+    type = null;
+  };
+  layer.ready(function(){
+    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'));
+      is && layer.close(othis.attr('times'), _index === domsElem.length - 1 ? callback : null);
       is = null;
     });
+    if(domsElem.length === 0) typeof callback === 'function' && callback();
+  });
 };
 
 /** 
@@ -1093,7 +1127,7 @@ layer.photos = function(options, loop, key){
           src: othis.attr('layer-src') || othis.attr('src'),
           thumb: othis.attr('src')
         });
-      })
+      });
     };
     
     pushData();
@@ -1101,6 +1135,7 @@ layer.photos = function(options, loop, key){
     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: {
@@ -1110,8 +1145,7 @@ layer.photos = function(options, loop, key){
         },
         full: options.full
       }), true);
-      pushData();
+    });
-    })
     
     //不直接弹出
     if(!loop) return;
@@ -1167,20 +1201,22 @@ layer.photos = function(options, loop, key){
   
   //一些动作
   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();
+      dict.imgprev(true);
     });  
     
     dict.bigimg.find('.layui-layer-imgnext').on('click', function(event){     
       event.preventDefault();
-      dict.imgnext();
+      dict.imgnext(true);
     });
     
     $(document).on('keyup', dict.keyup);
@@ -1210,6 +1246,11 @@ layer.photos = function(options, loop, key){
 
   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',
@@ -1239,19 +1280,24 @@ layer.photos = function(options, loop, key){
       moveType: 1,
       scrollbar: false,
       moveOut: true,
-      //anim: Math.random()*5|0,
+      anim: 5,
       isOutAnim: false,
       skin: 'layui-layer-photos' + skin('photos'),
       content: '<div class="layui-layer-phimg">'
         +'<img src="'+ data[start].src +'" alt="'+ (data[start].alt||'') +'" layer-pid="'+ data[start].pid +'">'
-        +'<div class="layui-layer-imgsee">'
+        +function(){
-          +(data.length > 1 ? '<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>' : '')
+          if(data.length > 1){
+            return '<div class="layui-layer-imgsee">'
+              +'<span class="layui-layer-imguide"><a href="javascript:;" class="layui-layer-iconext layui-layer-imgprev"></a><a href="javascript:;" class="layui-layer-iconext layui-layer-imgnext"></a></span>'
               +'<div class="layui-layer-imgbar" style="display:'+ (key ? 'block' : '') +'"><span class="layui-layer-imgtit"><a href="javascript:;">'+ (data[start].alt || '') +'</a><em>'+ dict.imgIndex +' / '+ data.length +'</em></span></div>'
             +'</div>'
+          }
+          return '';
+        }()
       +'</div>',
       success: function(layero, index){
         dict.bigimg = layero.find('.layui-layer-phimg');
-        dict.imgsee = layero.find('.layui-layer-imguide,.layui-layer-imgbar');
+        dict.imgsee = layero.find('.layui-layer-imgbar');
         dict.event(layero);
         options.tab && options.tab(data[start], layero);
         typeof success === 'function' && success(layero);
@@ -1299,9 +1345,12 @@ window.layui && layui.define ? (
     ready.run(window.jQuery);
     return layer;
   }) : function(){ //普通 script 标签加载
-    ready.run(window.jQuery);
     layer.ready();
+    ready.run(window.jQuery);
   }()
 );
 
 }(window);
+
+
+

src/theme/default/layer.css

@@ -144,16 +144,15 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;}
 
 /* photo模式 */
-.layui-layer-photos{-webkit-animation-duration: .8s; animation-duration: .8s;}
+.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-imguide,.layui-layer-imgbar{display:none;}
+.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, .layui-layer-imgnext{position:absolute; 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{left:10px; background-position:-5px -5px; _background-position:-70px -5px;}
 .layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;}
-.layui-layer-imgnext{right:10px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;}
+.layui-layer-imgnext{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:absolute; left:0; bottom:0; width:100%; height:32px; line-height:32px; background-color:rgba(0,0,0,.8); background-color:#000\9; filter:Alpha(opacity=80); color:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;}
+.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;}