实现一个弹窗的封装

前言

 　　这是阿里春招实习在线编程的一道题目：

用js实现，弹窗弹出时需要有半透明的蒙层，位置需要根据弹窗的大小实现左右、垂直居中，对话框需要有标题栏（标题栏有关闭功能）、内容栏、操作按钮栏，不能直接使用第三方UI库。

回答完这道题目之后，我想说总结一下自己封装的这个弹窗插件，只是简单的完成了部分功能，具体完整的功能，可以自行再添加~

源代码：Gist

演示地址：Demo

主要使用方法：

页面HTML结构：

<div class="modal" id='modal'>
    <div class="modal-dialog">
  <div class="modal-header">对话框标题<a href="#" class="close">×</a></div>
    <div class="modal-content">对话框的内容</div>
    <div class="modal-controller">
        <button class='btn-ok'>确定</button>
        <button class='bnt-close close'>取消</button>
    </div>
    </div>
</div>

js调用方法：

var modal=new Modal(document.getElementById('modal'));
// 说明 ： 实例化弹窗插件

function openModal(){
    modal.open();
}
// 说明 ：modal.close();关闭弹窗 

下面是详细的脚本解释：

(function(window){
  // 使用构造函数方法 声明一个Modal对象
  var Modal=function(ele){
        this.$el=ele;
        this.init();
    }
 // 在Modal的原型上实现close，open，init方法，实现方法的复用
    Modal.prototype.close=function(){
        this.$el.style.display='none';
    }
    Modal.prototype.open=function(){
        this.$el.style.display='block';
    }
    Modal.prototype.init=function(){
        var self=this;
       // 绑定关闭按钮点击事件处理函数，检索所有 带 .close类名 的按钮
        if(this.$el.addEventListener){
            this.$el.addEventListener('click',function(e){
                e.preventDefault();
                var target=e.target;
                var classNames=target.className.split(' ');
                if(classNames.indexOf('close')!==-1){
                    self.close();
                }
            },false);
        }else if(this.$el.attachEvent){
            this.$el.attachEvent('onclick',function(e){
                    e=e||window.event;
                if(e.preventDefault){
                    e.preventDefault();
                }else{
                    e.returnValue=false;
                }
                var target=e.target||e.srcElement;
                var classNames=target.className.split(' ');
                if(classNames.indexOf('close')!==-1){
                    self.close();
                }
            });
        }
    }
    window.Modal=Modal;
})(window);

结束语

　　这个弹窗插件使用了闭包，避免的全局环境的污染，只是给全局环境添加了一个Modal对象，可实现任意多个Modal对象的实例化，主要使用了原型+构造函数的方法构建对象。实现了公共方法的复用。如果有什么不好的地方，欢迎指出~