Merge pull request #1149 from meihangbo/main

laydate 和 dropdown 添加遮罩 shade ; 以便支持在 div 出现滚动条时, 不随滚动条滚动的问题;

examples/dropdown.html

@@ -42,6 +42,7 @@ layui.use('dropdown', function(){
 
   dropdown.render({
     elem: '#demo1'
+    ,shade: [0.1, '#ddd']
     //,align: 'right'
     ,data: [{
       title: 'menu item 1'

examples/laydate.html

@@ -152,6 +152,7 @@ layui.use('laydate', function(laydate){
   laydate.render({
     elem: '#test-first',
     min: 0,
+    shade: [0.1, '#ddd']
     //max: '2016-12-30'
   });
 

src/css/layui.css

@@ -1146,7 +1146,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 /* 下拉菜单 */
 .layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;}
 .layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
-
+.layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;}
 
 /** 导航菜单 **/
 .layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}

src/css/modules/laydate.css

@@ -17,6 +17,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
 .layui-laydate-header *,
 .layui-laydate-content td,
 .layui-laydate-list li{transition-duration: .3s; -webkit-transition-duration: .3s;}
+.layui-laydate-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;}
 
 /* 微微往下滑入 */
 @keyframes laydate-downbit {

src/modules/dropdown.js

@@ -56,7 +56,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
 
   //字符常量
   ,STR_ELEM = 'layui-dropdown', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled', STR_NONE = 'layui-none'
-  ,STR_ITEM_UP = 'layui-menu-item-up', STR_ITEM_DOWN = 'layui-menu-item-down', STR_MENU_TITLE = 'layui-menu-body-title', STR_ITEM_GROUP = 'layui-menu-item-group', STR_ITEM_PARENT = 'layui-menu-item-parent', STR_ITEM_DIV = 'layui-menu-item-divider', STR_ITEM_CHECKED = 'layui-menu-item-checked', STR_ITEM_CHECKED2 = 'layui-menu-item-checked2', STR_MENU_PANEL = 'layui-menu-body-panel', STR_MENU_PANEL_L = 'layui-menu-body-panel-left'
+  ,STR_ITEM_UP = 'layui-menu-item-up', STR_ITEM_DOWN = 'layui-menu-item-down', STR_MENU_TITLE = 'layui-menu-body-title', STR_ITEM_GROUP = 'layui-menu-item-group', STR_ITEM_PARENT = 'layui-menu-item-parent', STR_ITEM_DIV = 'layui-menu-item-divider', STR_ITEM_CHECKED = 'layui-menu-item-checked', STR_ITEM_CHECKED2 = 'layui-menu-item-checked2', STR_MENU_PANEL = 'layui-menu-body-panel', STR_MENU_PANEL_L = 'layui-menu-body-panel-left', STR_ELEM_SHADE = 'layui-dropdown-shade'
   
   ,STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE
 
@@ -79,6 +79,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
     ,isSpreadItem: true //是否初始展开子菜单
     ,data: [] //菜单数据结构
     ,delay: 300 //延迟关闭的毫秒数，若 trigger 为 hover 时才生效
+    ,shade: 0 // 遮罩
   };
   
   //重载实例
@@ -251,6 +252,10 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
     that.remove(); //移除非当前绑定元素的面板
     elemBody.append(that.elemView);
     options.elem.data(MOD_INDEX +'_opened', true);
+
+    //遮罩
+    var shade = options.shade ? ('<div class="'+ STR_ELEM_SHADE +'" style="'+ ('z-index:'+ (that.elemView.css('z-index')-1) +'; background-color: ' + (options.shade[1] || '#000') + '; opacity: ' + (options.shade[0] || options.shade)) +'"></div>') : '';
+    that.elemView.before(shade);
     
     //坐标定位
     that.position();
@@ -324,6 +329,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
       );
       elemPrev.remove();
     }
+    lay('.' + STR_ELEM_SHADE).remove();
   };
   
   //延迟删除视图

src/modules/laydate.js

@@ -94,6 +94,7 @@
   var ELEM_TIME_BTN = 'laydate-btns-time';
   var ELEM_PREVIEW = 'layui-laydate-preview';
   var ELEM_MAIN = 'layui-laydate-main';
+  var ELEM_SHADE = 'layui-laydate-shade';
 
   // 组件构造器
   var Class = function(options){
@@ -163,6 +164,7 @@
     ,done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
     ,change: null //日期时间改变后的回调
     ,autoConfirm: true //是否自动确认（日期|年份|月份选择器非range下是否自动确认）
+    ,shade: 0
   };
   
   //多语言
@@ -641,6 +643,9 @@
       ,that.position() //定位
     );
     
+    var shade = options.shade ? ('<div class="'+ ELEM_SHADE +'" style="'+ ('z-index:'+ (elem.style.zIndex-1) +'; background-color: ' + (options.shade[1] || '#000') + '; opacity: ' + (options.shade[0] || options.shade)) +'"></div>') : '';
+    elem.insertAdjacentHTML('beforebegin', shade);
+
     that.checkDate().calendar(null, 0, 'init'); //初始校验
     that.changeEvent(); //日期切换
     
@@ -670,6 +675,7 @@
         typeof options.close === 'function' && options.close(that);
       });
     }
+    lay('.' + ELEM_SHADE).remove();
     return that;
   };