文件位置变动

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // 使用 IntelliSense 了解相关属性。 
+    // 悬停以查看现有属性的描述。
+    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "启动 Chrome 并打开 localhost",
+            "url": "http://localhost:8080/test/demo.html",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

src/layer.js

@@ -31,7 +31,7 @@ var isLayui = window.layui && layui.define, $, win, ready = {
   btn: ['确定', '取消'],
 
   //五种原始层模式
-  type: ['dialog', 'page', 'iframe', 'loading', 'tips'],
+  type: ['dialog', 'page', 'iframe', 'loading', 'tips', 'notice'],
   
   //获取节点的style属性值
   getStyle: function(node, name){
@@ -144,7 +144,8 @@ var layer = {
       closeBtn: false,
       btn: false,
       resize: false,
-      end: end
+      end: end,
+      anim: 1
     }, (type && !ready.config.skin) ? {
       skin: skin + ' layui-layer-hui',
       anim: anim
@@ -156,6 +157,26 @@ var layer = {
        return options;
     }()));  
   },
+
+  notice: function(content, options, end){ //最常用提示层
+    var type = typeof options === 'function', rskin = ready.config.skin;
+    var skin = (rskin ? rskin + ' ' + rskin + '-notice' : '')||'layui-layer-notice';
+    if(type) end = options;
+    return layer.open($.extend({
+      content: content,
+      shade: false,
+      skin: skin,
+      time: 3000,
+      btn: false,
+      area: '330px',
+      resize: false,
+      type: 5,
+      anim:5,
+      offset: 'notice',
+      tipsMore: true,
+      end: end
+    }, type ? {} : options));  
+  },
   
   load: function(icon, options){
     return layer.open($.extend({
@@ -193,7 +214,7 @@ 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.anim = ['layer-anim-00', 'layer-anim-01', 'layer-anim-02', 'layer-anim-03', 'layer-anim-04', 'layer-anim-05', 'layer-anim-06','layer-anim-07'];
 
 //默认配置
 Class.pt.config = {
@@ -304,6 +325,10 @@ Class.pt.creat = function(){
       config.tips = typeof config.tips === 'object' ? config.tips : [config.tips, true];
       config.tipsMore || layer.closeAll('tips');
     break;
+    case 5:
+      config.btn = ('btn' in config) ? config.btn : ready.btn[0];
+      config.tipsMore || layer.closeAll('notice');
+    break;
   }
   
   //建立容器
@@ -343,7 +368,17 @@ Class.pt.creat = function(){
   }
   
   config.time <= 0 || setTimeout(function(){
-    layer.close(that.index)
+    if(config.type == 5){
+      $.each($('.'+doms[0]+'-notice'), function(i, item){
+        var othis = $(this);  
+        if(othis.attr('times') > that.index){
+          othis.offset({top:(othis.offset().top - that.layero.outerHeight() - 16)});
+        }          
+      });
+      layer.close(that.index)
+    }else{
+      layer.close(that.index)
+    }
   }, config.time);
   that.move().callback();
   
@@ -436,6 +471,19 @@ Class.pt.offset = function(){
     } else if(config.offset === 'rb'){ //右下角
       that.offsetTop = win.height() - area[1];
       that.offsetLeft = win.width() - area[0];
+    } else if(config.offset === 'notice'){ 
+      var top = 0;
+      if($('.'+doms[0]+'-notice').length > 1){
+        $.each($('.'+doms[0]+'-notice'), function(){
+          var othis = $(this);  
+          if(this.id !== layero[0].id) {
+            top = top > othis.offset().top ? top : othis.offset().top;
+          }
+        });
+        top = top + area[1];
+      }
+      that.offsetTop = top + 16;
+      that.offsetLeft = win.width() - area[0] - 16;
     } else {
       that.offsetTop = config.offset;
     }
@@ -656,6 +704,14 @@ Class.pt.callback = function(){
   function cancel(){
     var close = config.cancel && config.cancel(that.index, layero);
     close === false || layer.close(that.index);
+    if(that.config.type === 5){
+        $.each($('.'+doms[0]+'-notice'), function(i, item){
+          var othis = $(this);  
+          if(othis.attr('times') > that.index){
+            othis.offset({top:(othis.offset().top - layero.outerHeight() - 16)});
+          }          
+        });
+    }
   }
   
   //右上角关闭回调

src/theme/default/layer.css

@@ -18,7 +18,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .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-dialog .layui-layer-ico,.layui-layer-notice .layui-layer-ico,
 .layui-layer-setwin a,
 .layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
 
@@ -75,9 +75,9 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-btn-c{text-align: center;}
 
 /* 定制化 */
-.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-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-dialog,.layui-layer-notice{min-width:260px;}
+.layui-layer-dialog .layui-layer-content,.layui-layer-notice .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,.layui-layer-notice .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;}
@@ -88,7 +88,7 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .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-dialog .layui-layer-padding,.layui-layer-notice .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;}
@@ -155,7 +155,6 @@ html #layuicss-layer{display: none; position: absolute; width: 1989px;}
 .layui-layer-imgnext{right:10px; _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:220px; height:32px; line-height:32px; 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;}
@@ -267,23 +266,12 @@ i{
 	transform: rotate(270deg); 
 	-webkit-transform: rotate(270deg); 
 }
-@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-duration:.2s; animation-duration:.2s;}
-
-@media screen and (max-width: 1100px) {
-  .layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;}
-}
 .image{
     position: absolute;
     margin:0; /*之所以不使用auto直接垂直居中，是因为当图片旋转时left值会很难计算*/
     padding:0;
     z-index: 10;
     display: none;
-	moz-user-select: -moz-none;
     -moz-user-select: none;
     -o-user-select:none;
     -khtml-user-select:none;
@@ -383,7 +371,6 @@ i{
     left: 0;
     right: 0;
     bottom: 0;
-	moz-user-select: -moz-none;
     -moz-user-select: none;
     -o-user-select:none;
     -khtml-user-select:none;

src/theme/element/style.css

@@ -0,0 +1,52 @@
+.layer-element{
+    border-radius: 4px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+.layer-element .layui-layer-title{
+    font-size: 18px;
+    color: #303133;
+    background-color: #fff;
+    border-bottom:none;
+}
+.layer-element-notice .layui-layer-title{
+    font-weight: 700;
+    font-size: 16px;
+    color: #303133;
+    margin: 0;
+    padding-left:27px;
+    height: 30px;
+    border-radius: 16px;
+}
+.layer-element-notice{
+    border-radius: 16px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+}
+.layer-element-notice .layui-layer-content{
+    padding: 5px 27px 13px 27px;
+    font-size: 14px;
+    line-height: 21px;
+    color: #606266;
+    text-align: justify;
+}
+
+
+
+@-webkit-keyframes 
+layer-zoomInRight{
+	0%
+	{opacity:0;-webkit-transform:translateX(400px);
+	transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear}
+	60%
+	{opacity:1;-webkit-transform: translateX(0);
+	transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}}
+@keyframes 
+layer-zoomInRight{
+	0%
+	{opacity:0;-webkit-transform:translateX(400px);
+	transform: translateX(400px);-webkit-animation-timing-function:linear;animation-timing-function:linear}
+	60%
+	{opacity:1;-webkit-transform: translateX(0);
+	transform: translateX(0);-webkit-animation-timing-function:linear;animation-timing-function:linear}}
+    .layer-anim-07{-webkit-animation-name:layer-zoomInRight;animation-name:layer-zoomInRight;animation-duration: 0.8s;-webkit-animation-duration: 0.8s}

test/demo.html

@@ -9,8 +9,6 @@
   <script src="../src/layer.js"></script>
 
   <style>
-  html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
-  a,a:hover{ text-decoration:none;}
   pre{font-family:'微软雅黑'}
   .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
   .box a{padding-right:15px;}
@@ -23,37 +21,31 @@
 </head>
 <body>
 <div class="box">
-<pre>
- @Name：layer-v<script>document.write(layer.v)</script> 弹层组件说明
- @Author：贤心
- @Site：<a href="http://layer.layui.com/"  target="_blank">http://layer.layui.com/</a>
-
-
-<strong>【注意事项】</strong>
-一、使用时，请把文件夹layer整个放置在您站点的任何一个目录，只需引入layer.js即可，除jQuery外，其它文件无需再引入。
-二、如果您的js引入是通过合并处理或者您不想采用layer自动获取的绝对路径，您可以通过layer.config()来配置（详见官网API页）
-三、jquery需1.8+
-四、更多使用说明与演示，请参见layer官网。
-五、使用时请务必保留来源，请勿用于违反我国法律的web平台。
-六、layer遵循LGPL协议，将永久性提供无偿服务。版权最终解释权：贤心。
-</pre>
+<div>
+  <button id="alert">alert</button>
+  <button id="confirm">confirm</button>
+  <button id="msg">msg</button>
+  <button id="Notice">Notice</button>
 </div>
-<div id="layer-photos-demo" class="layer-photos-demo">
-          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370038114&di=f0daa074625c17c69a5fb32c2bdbd539&imgtype=0&src=http%3A%2F%2F5.595818.com%2Fresource%2Fsoftware%2F000%2F012%2F8921f9deb38bc002007663788b16a11c.jpg" alt="说好的，一起Fly" layer-index="0">
-          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370088593&di=d0f708353b8669c93028a71f121f31ae&imgtype=0&src=http%3A%2F%2Fimg002.21cnimg.com%2Fphotos%2Falbum%2F20160326%2Fm600%2FB920004B5414AE4C7D6F2BAB2966491E.jpeg" alt="LayIM" layer-index="1">
-          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488964839&di=dc21870ce25fb4a47694e6b127b16e49&imgtype=jpg&er=1&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg" alt="佟丽娅女神" layer-index="2">
-          <img layer-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" layer-pid="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488370253653&di=38f81ea3150d22adc14adfeba97f2851&imgtype=0&src=http%3A%2F%2Fimg.bbs.cnhubei.com%2Fforum%2Fdvbbs%2F2004-4%2F200441915031894.jpg" alt="凤姐是个好人" layer-index="3">
+</div>
+<!-- <div id="layer-photos-demo" class="layer-photos-demo">
+
         </div>
 <div class="box" style="text-align:center">
   <a href="http://layer.layui.com/" target="_blank">更多示例</a>
   <a href="http://www.layui.com/doc/modules/layer.html" target="_blank">使用文档</a>
   <a href="http://fly.layui.com/" id="suggest">交流反馈</a>
   <a href="javascript:;" id="about">关于</a>
-</div>
+</div> -->
 
 <script>
 ;!function(){
 
+  layer.config({
+    extend: 'element/style.css', //加载新皮肤
+    skin: 'layer-element' //一旦设定，所有弹层风格都采用此主题。
+  });
+
 layer.photos({
   photos: '#layer-photos-demo'
   });
@@ -63,6 +55,27 @@ layer.photos({
 $('#about').on('click', function(){
   layer.alert(layer.v + ' - 贤心出品 sentsin.com');
 });
+$('#alert').on('click',function(){
+  layer.alert('内容',{anim:0,icon: 1});//, {icon: 1}
+});
+$('#confirm').on('click',function(){
+  layer.confirm('您是如何看待前端开发？', {
+    btn: ['重要','奇葩'] //按钮
+  }, function(){
+    layer.msg('的确很重要', {icon: 1});
+  }, function(){
+    layer.msg('也可以这样', {
+      time: 20000, //20s后自动关闭
+      btn: ['明白了', '知道了']
+    });
+  });
+});
+$('#msg').on('click',function(){
+  layer.msg('内容',{anim:3,icon: 1})//, {icon: 1}
+});
+$('#Notice').on('click',function(){
+  layer.notice('内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',{title:'提示',anim:7,icon: 1})//, {icon: 1}
+});
 
 }();
 </script>