實現一個彈窗的封裝

前言

 　　這是阿里春招實習在線編程的一道題目：

用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對象的實例化，主要使用了原型+構造函數的方法構建對象。實現了公共方法的復用。如果有什么不好的地方，歡迎指出~