js 弹出层

最近貌似经常用到弹出层，把代码给整理一下方便以后用。原生js写的demo，弹出效果比较生硬。先看一下demo（点击这里） 先。

接下来是代码：

var Popup=(function(){

    var close_trigger,    //关闭弹出层触发器
        popup_layer,      //弹出层
        popup_layer_box;  //弹出层里的box


    //设置弹出层的高、宽度
    function initLayer(){

        //先初始化先，不然resize有问题
        popup_layer.style.width=0+"px";
        popup_layer.style.height=0+"px";
        var winWidth,
            winHeight;
        if (window.innerWidth){
            winWidth = window.innerWidth;
        }else if ((document.body) && (document.body.clientWidth)){
            winWidth = document.body.clientWidth;
        }
        //获取窗口高度
        if (window.innerHeight){
            winHeight = window.innerHeight;
        }else if ((document.body) && (document.body.clientHeight)){
            winHeight = document.body.clientHeight;
        }  
        //通过深入Document内部对body进行检测，获取窗口大小
        if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth){
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
        }
        popup_layer.style.width=winWidth+"px";
        popup_layer.style.height=winHeight+"px";


        var scrollTop=(document.documentElement.scrollTop>document.body.scrollTop)?document.documentElement.scrollTop:document.body.scrollTop;
        popup_layer.style.top=scrollTop+"px";

    }

 
    //设置弹出层里面box的位置
    function initLayerBox(){

        var layerHeight=parseInt(popup_layer.style.height),
            boxHeight=popup_layer_box.offsetHeight,
            layerWidth=parseInt(popup_layer.style.width),
            boxWidth=popup_layer_box.offsetWidth,

            top=(layerHeight-boxHeight)/2,
            left=(layerWidth-boxWidth)/2;
    

        popup_layer_box.style.top=top+"px";
        popup_layer_box.style.left=left+"px";
    }


    function closeLayerHandler(event){
        var e=event?event:window.event,
            target=e.target||e.srcElement;
        if(target.id===close_trigger.id||target.id===popup_layer.id){
            popup_layer.style.display='none';
            toggleBody('auto','');
        }        
    }

    function popupResizeHandler(){
        initLayer();
        initLayerBox();

    }

    function toggleBody(bo,ho){
        document.body.style.overflow=bo;
        document.getElementsByTagName('html')[0].style.overflow=ho;    //ie6下直接设置body的overflow时有问题,所以加多这一句
    }
    return{

        init:function(close_trigger_id,popup_layer_id,popup_layer_box_id){


            close_trigger=document.getElementById(close_trigger_id);
            popup_layer=document.getElementById(popup_layer_id);
            popup_layer_box=document.getElementById(popup_layer_box_id);

            window.onresize=popupResizeHandler;            
            close_trigger.onclick=closeLayerHandler;
            popup_layer.onclick=closeLayerHandler;
            
        },
        popup:function(){
            toggleBody('hidden','visible');
            popup_layer.style.display="block";
            initLayer();
            initLayerBox();
            
        }

    }


}());

var trigger=document.getElementById('btnPopup');
Popup.init('closePopupLayer','popupLayer','popupLayerBox');
trigger.onclick=Popup.popup;

效果：在chrome、ff下是正常的能达到预期效果。。。但是呢，IE~有个问题一直无法理解，就是鼠标不知道为什么可以跑到弹出层的下面的去。比如在有遮罩的情况下，遮罩层下面的按钮是点击不了的，但是在IE，鼠标硬是能穿过遮罩层去点击底下的按钮。就因为这个bug，本来想说点击半透明遮罩层的时候就关闭弹出层，现在在IE下这个效果实现不了了。