Overlay

@@ -30,6 +30,9 @@ iconfont 新建项目，使用 class 控制图标样式，不要用 unicode
 <h2>modal</h2>
 <h2>modal</h2>
 支持 一个按钮，两个按钮，多个按钮
 支持 一个按钮，两个按钮，多个按钮
 每个按钮支持自定义事件
 每个按钮支持自定义事件
+<p>
+    <a href="javascript:void(0);" id="modal-overlay">显示覆盖层</a>
+</p>
 
 
 <h2>Handlebars Template</h2>
 <h2>Handlebars Template</h2>
 <p>Hello,<span id="hbs-placeholder"></span>!</p>
 <p>Hello,<span id="hbs-placeholder"></span>!</p>

+/**
+ * Modal 模态组件
+ *
+ * @author: aiden.xu<aiden.xu@yoho.cn>
+ * @date: 2016/5/6
+ */
+
+'use strict';
+
+const Overlay = require('./overlay');
+
+class Modal {
+    /**
+     * Modal
+     *
+     * @param opts
+     */
+    constructor(opts) {
+        // 默认参数
+        this.defaults = {
+            template: ''
+        };
+
+        // 初始化参数
+        this.settings = Object.assign({}, this.defaults, opts);
+
+    }
+
+    show() {
+
+    }
+
+    hide() {
+
+    }
+
+}
+
+(function($) {
+    $.extend(Overlay.prototype, {
+        show: function() {
+
+        },
+        hide: function() {
+
+        }
+    });
+}(jQuery));
+
+
+module.exports = Modal;

+/**
+ * Modal 覆盖层组件
+ *
+ * @author: aiden.xu<aiden.xu@yoho.cn>
+ * @date: 2016/07/18
+ */
+
+'use strict';
+
+const ANIMATIONS = {
+    fade: {
+        in: 'overlay-fade-in',
+        out: 'overlay-fade-out'
+    }
+};
+
+class Overlay {
+    constructor(opts) {
+        this.isVisible = false;
+
+        // 默认参数
+        this.defaults = {
+            className: 'overlay',
+            clickToClose: true, // 点击关闭
+            onClose: $.noop,    // 关闭回调函数
+            animation: 'fade',   // 动画效果
+            disableScrolling: true
+        };
+
+        // 初始化参数
+        this.settings = Object.assign({}, this.defaults, opts);
+
+        this.settings.animationClasses = {
+            in: ANIMATIONS[this.settings.animation].in,
+            out: ANIMATIONS[this.settings.animation].out
+        };
+
+        this.elem = $('<div/>', {
+            class: this.settings.className
+        });
+
+        this.elem.appendTo('body');
+
+        // 点击关闭
+        if (this.settings.clickToClose) {
+            this.elem.click(()=> {
+                this.hide();
+            });
+        }
+
+        if (this.settings.disableScrolling) {
+            // 覆盖层出现时阻止滚动
+            $(window).on('touchmove', (e)=> {
+                if (this.isVisible) {
+                    e.preventDefault();
+                }
+            });
+        }
+    }
+
+    _clearStylesClasses() {
+        this.elem
+            .removeClass(this.settings.animationClasses.in)
+            .removeClass(this.settings.animationClasses.out);
+    }
+
+    /**
+     * 显示覆盖层
+     */
+    show() {
+        this._clearStylesClasses();
+        this.elem.css({
+            visibility: 'visible',
+            height: $(window).height() * window.devicePixelRatio
+        }).show().addClass(this.settings.animationClasses.in);
+        this.isVisible = true;
+
+        $('body').css({
+            overflow: 'hidden'
+        });
+    }
+
+    /**
+     * 关闭覆盖层
+     */
+    hide() {
+        this._clearStylesClasses();
+        const listener = () => {
+            // 一次性监听，动画完成事件触发后删除监听器
+            this.elem[0].removeEventListener('webkitTransitionEnd', listener);
+            this.elem.css({
+                visibility: 'hidden'
+            });
+            this._clearStylesClasses();
+            this.isVisible = false;
+        };
+
+        this.elem[0].addEventListener('webkitTransitionEnd', listener);
+        this.elem.addClass(this.settings.animationClasses.out);
+
+        if (this.settings.disableScrolling) {
+            $('body').css({
+                overflow: 'auto'
+            });
+        }
+    }
+}
+
+((function($) {
+    let inst = null;
+
+    $.overlay = opts => {
+        if (!inst) {
+            inst = new Overlay(opts);
+        }
+        return inst;
+    };
+})(jQuery));
+
+module.exports = Overlay;

@@ -40,4 +40,10 @@ $('#hbs-placeholder').html(tpl({
 }));
 }));
 
 
 
 
+var overlay = require('../common/overlay');
+$('#modal-overlay').click(()=> {
+    var overlay = $.overlay();
+    overlay.show();
+});
+
 /* eslint-enable */
 /* eslint-enable */

@@ -5,3 +5,4 @@
 @import "tip";
 @import "tip";
 @import "modal";
 @import "modal";
 @import "swiper";
 @import "swiper";
+@import "modal";

+@import "overlay";

+.overlay {
+    position: absolute;
+    background: #000;
+    opacity: 0;
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.overlay-fade-in {
+    opacity: 0.5;
+    transition: opacity 0.1s linear;
+}
+
+.overlay-fade-out {
+    opacity: 0;
+    transition: opacity 0.1s linear;
+}